Блог

Я хочу создать 4 поля, каждое с кнопкой отправки, так что при нажатии кнопки логическое значение для соответствующего поля устанавливается в true, и будет отображаться скрытый div. Но, похоже, я могу заставить это работать.

 <section id="gameBoard">
  <div :class="box.name" v-for="box in boxes">
    <h1 class="boxTitle">{{box.name}}</h1>
    <button :class="box.buttonClass" value="true" v-model="box.gotClicked" type="submit"> <img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/arrows-maximize-enlarge-512.png" height="20" width="20">

    </button>
    <div v-if="box.gotClicked">
      Hello!
    </div>

  </div>
</section>
 

JS

 var element = new Vue({
  el: '#gameBoard',
  data: {
    boxes: [
      {
        name: 'box workers',
        buttonClass: 'enlarge bigWorker',
        gotClicked: false,
      },
      {
        name: 'box auction',
        buttonClass: 'enlarge bigAuction',
        gotClicked: false,
      },
      {
        name: ' box items',
        buttonClass: 'enlarge bigItem',
        gotClicked: false,
      },
      {
        name: ' box skills',
        buttonClass: 'enlarge bigSkill',
        gotClicked: false,
      },
    ],
  },
});
 

Согласно документам Vue:

Директиву v-model можно использовать для создания двухсторонних привязок данных при вводе формы, текстовой области и элементах выбора. Он автоматически выбирает правильный способ обновления элемента на основе типа ввода.

Установка значения ( v-model ) в button значение не изменяет value . Вы должны использовать события и обрабатывать значение вручную!

 <section id="gameBoard">
    <div :class="box.name" v-for="(box,index) in boxes">
      <h1 class="boxTitle">{{ box.name }}</h1>
      <button .... @click="toggle(box)">
         ...
      </button>
      <div v-if="box.gotClicked">Clicked</div>
    </div>
  </section>
 

   methods: {
    toggle(box) {
       box.gotClicked = !box.gotClicked
    }
  }
 

Вот рабочий пример

Вы должны вызвать щелчок события и передать index обработчику, чтобы переключить значение :

   <section id="gameBoard">
    <div :class="box.name" v-for="(box,index) in boxes">
      <h1 class="boxTitle">{{ box.name }}</h1>
      <button
        :class="box.buttonClass"
    
        @click.prevent="toggle(index)"
        type="submit"
      >
        <img
          src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/arrows-maximize-enlarge-512.png"
          height="20"
          width="20"
        />
      </button>
      <div v-if="box.gotClicked">Hello!</div>
    </div>
  </section>
 

в сценарии :

 var element = new Vue({
    el: "#gameBoard",
    data: {

        boxes: [{
            name: "box workers",
            buttonClass: "enlarge bigWorker",
            gotClicked: false
        }, {
            name: "box auction",
            buttonClass: "enlarge bigAuction",
            gotClicked: false
        }, {
            name: " box items",
            buttonClass: "enlarge bigItem",
            gotClicked: false
        }, {
            name: " box skills",
            buttonClass: "enlarge bigSkill",
            gotClicked: false
        }],
    },

methods:{
   toggle(index){
     this.$set(this.boxes,index,{...this.boxes[index],gotClicked:true} )
   }
}
})
 

ПОЛНЫЙ ПРИМЕР

 var element = new Vue({
  el: "#gameBoard",
  data: {

    boxes: [{
      name: "box workers",
      buttonClass: "enlarge bigWorker",
      gotClicked: false
    }, {
      name: "box auction",
      buttonClass: "enlarge bigAuction",
      gotClicked: false
    }, {
      name: " box items",
      buttonClass: "enlarge bigItem",
      gotClicked: false
    }, {
      name: " box skills",
      buttonClass: "enlarge bigSkill",
      gotClicked: false
    }],
  },

  methods: {
    toggle(index) {
      this.$set(this.boxes, index, { ...this.boxes[index],
        gotClicked: true
      })
    }
  }
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<section id="gameBoard">
  <div :class="box.name" v-for="(box,index) in boxes">
    <h1 class="boxTitle">{{ box.name }}</h1>
    <button :class="box.buttonClass" @click.prevent="toggle(index)" type="submit">
            <img
              src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/arrows-maximize-enlarge-512.png"
              height="20"
              width="20"
            />
          </button>
    <div v-if="box.gotClicked">Hello!</div>
  </div>
</section>