Как выполнять функцию только когда включен чекбокс в положение true?

Question

[Антон]

Доброго всем дня!
Подскажите как реализовать переключение между двумя функциями.
У меня есть два плагина d3 и Snap.svg, как сделать так, что бы при включенном чекбоксе выполнялся d3 а при выключенном snap.svg.

svg: function (){
   this.d3()
   this.svgSnap()
}

Answer 1

[Igor Koch]

в data завести переменную:
isD3JS: true
На чекбокс повесить v-model
<input type="checkbox" v-model="isD3JS">
и в методе использовать

svg: function (){
  if(this.isD3JS){
    this.d3()
  }else{
    this.svgSnap()
  }
}

Можно брать элемент по id, как дали ответ выше, но используя Vue это бдует неправильно.

Comments

[Антон]

Igor Koch Да, обе функции примонтируются и будут работать вместе, нужно как то их разрушать

[Igor Koch]

Антон: Почитайте документацию с d3js и svgSnap, и перед вызовом делайте destroy/remove старых,
то о чем вы сейчас говрите, лежит внутри функци d3 и svgSnap, ваш изначальный вопрос совсем о другом)

[Антон]

Igor Koch: Ну я думал, можно ли это делать стандартными методами vue) немного не корректно задал

Answer 2

[Николай Каргин]

if(document.getElementById("someElement").checked){
// Очевидно, что если проставлен
}else{
// Очевидно, что если не проставлен
}

Comments

[Антон]

Николай Каргин Увы это слишком очевидно, и это не работает, так как во vue обе функции будут работать

[Николай Каргин]

svg: function (){
	if(document.getElementById("someElement").checked){
		this.d3();
	}else{
		this.svgSnap();
	}
}

С чего бы это?

[Антон]

Николай Каргин: С того, что во vue после того как примонтировали функцию она будет работать и дальше. Необходимо разрушать именно vue компонент.

Answer 3

[Антон Антон]

Сделать два дочерних компонента, один с d3, второй с svgsnap, рулить ими переменной и v-if v-else