Передача свойства данных в качестве аргумента функции в vue. js

Question

Вместо нескольких методов, которые выглядят так:

showDiv1(){ 
    this.showDiv1 = true
},
showDiv2(){ 
    this.showDiv2 = true
}

Я пытаюсь создать такой, как:

showElements(...elementNames){
     elementNames.forEach(name => {
           this.$data.name = true
     })
}

Идея состояла в том, чтобы передать одно или несколько свойств из данных и при вызове метода эти элементы должны отображаться на экране.

В данных у меня есть что-то вроде этого:

  data() {
      return {
           div1 = false,
           div2 = false
      }
  }

В html Я пытался вызвать функцию по нажатию в паре способов:

  <button @click="showElements('div1')">Show<button>
  <button @click="showElements(div1)">Show<button>
  <div v-if="div1">
       <p>Hello</p>
  </div>    

Но ничего не происходит.

Answer 1

Dynami c Имена свойств должны быть доступны в скобках:

showElements(...elementNames){
     elementNames.forEach(name => {
           this[name] = true
     })
}

Этот метод должен использоваться следующим образом:

<button @click="showElements('div1')">Show<button>

Answer 2

Похоже, у вас есть синтаксическая ошибка. Вместо записи в объект данных, подобный этому:

 data() {
      return {
           div1 = false,
           div2 = false
      }
  }

Вы должны написать это так:

 data() {
      return {
           div1: false,
           div2: false
      }
  }

Убедитесь, что вы используете только тот синтаксис, который соответствует объекту в объекте данных. Затем вы можете назвать это так:

 <button @click="showElements(div1)">Show<button>

Еще одна вещь, при доступе к данным вам на самом деле не нужно писать $ data. Просто напишите «this.name», чтобы получить доступ к вашим данным.