Vue.js v-for循环中使用v-model的问题

我想创建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>

---

您应该触发事件单击并将

索引传递给处理程序，以便切换值：

  <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元素=新的Vue({
el:“游戏板”，
数据：{
方框：[{
名称：“盒子工人”，
按钮类：“放大大工人”，
错误：错误
}, {
名称：“盒式拍卖”，
按钮类：“放大大拍卖”，
错误：错误
}, {
名称：“盒子项目”，
按钮类：“放大大项目”，
错误：错误
}, {
名称：“方块技能”，
按钮类：“放大大技能”，
错误：错误
}],
},
方法：{
切换（索引）{
this.$set（this.box，index，{…this.box[index]，
格特：是的
})
}
}
})

{{box.name}
你好
根据：

可以使用v-model指令在表单输入、textarea和select元素上创建双向数据绑定。它会根据输入类型自动选择更新元素的正确方式

将值（
v-model
）设置为
按钮
不会更改
值
。您应该使用事件并手动处理值

<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>


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} )
   }
}
})

<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
    }
  }