Изменение данных Vue на основе параметра метода - PullRequest
Новая
       4

Изменение данных Vue на основе параметра метода

0 голосов
/ 18 июня 2019

Я только начал использовать Vue, и у меня очень простая проблема, которую я просто не могу заставить работать!Я пытаюсь создать смонтированное событие, которое запускает метод с определенным параметром внутри, чтобы изменить значение «показать» элемента.Вот код: 

export default {
    data(){
        return {
            one: false,
        }
    },
    methods: {
        show: function(el) {
            this.el = true;
        }
    },
    mounted(){
        this.show(this.one)
    }
}

Я хочу, чтобы «el» был просто общим заполнителем для любого имени «data», передаваемого в метод.в будущем я могу иметь не только «один», но также «два», «три» и «четыре».Я хочу, чтобы метод "show" мог использовать любую ссылку на один из этих 4 параметров и изменить его значение с false на true.

в методе show я получаю сообщение об ошибке «el определен, но никогда не используется».единственное решение, к которому я пришел, - это использовать метод if "if this.one === el {...}", но это побеждает цель.любая помощь будет оценена

Ответы [ 2 ]

0 голосов
/ 18 июня 2019 
export default {
data(){
    return {
        one: false,
    }
},
methods: {
    show(bol) {
        this.one = bol;
    }
},
mounted(){
    this.show(this.one)
}
}

Используйте код выше, это будет работать.

0 голосов
/ 18 июня 2019 

new Vue({
  el: '#editor',
  data: {
    el: false,
    item : ''
  },
  computed: {
    
  },
  methods: {
    show (passedValue, item) {    
    this.item = item
      this.el = passedValue
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<div id="editor">


<div id="div1" v-if="el===true && item =='div-1'" class="show">
div1 displayed
</div>
<div id="div-2" v-if="el===true && item =='div-2'" class="show">
div2 displayed
</div>
<button v-on:click="show(true, 'div-1')">show div1</button>
<button v-on:click="show(false, 'div-1')">hide div1</button>

<button v-on:click="show(true, 'div-2')">show div2</button>
<button v-on:click="show(false, 'div-2')">hide div2</button>
</div>
...