Question

我正在努力在循环内的vue.js中发挥反应性。循环呈现时没有任何问题，但是，当尝试触发事件时，它会更新内容，但不可见或呈现页面中的数据。

我已经将最新版本的vue.js与bootstrap和jquery一起使用。我尝试在循环项中添加key，但无法正常工作。但是，当使用v-model更新任何其他内容时，它就可以工作。

标记

<div id="app">

  <div class="props">
    <div class="prop-item" v-for="prop in modules.variations.properties">
      <p>=== <strong v-text="prop.name"></strong> ===</p>
      <ul>
        <li v-for="value in prop.values" @click="activeProp(prop,value)">
          <span v-text="value.name"></span>
        </li>
      </ul>
    </div>
  </div>

  <input type="text" v-model="message">

<pre>{{ actives }}</pre>
<pre>{{ message }}</pre>
</div>

<script>
window.spdata = {
   "variations":{
      "properties":[
         {
            "id":1,
            "name":"Color",
            "values":[
               {
                  "id":1,
                  "name":"Black",
               },
               {
                  "id":2,
                  "name":"Red",
               },
               {
                  "id":3,
                  "name":"Blue",
               }
            ]
         },
         {
            "id":2,
            "name":"Size",
            "values":[
               {
                  "id":4,
                  "name":"XL",
               },
               {
                  "id":5,
                  "name":"XXL",
               },
               {
                  "id":6,
                  "name":"XXXL",
               },
            ]
         },
         {
            "id":3,
            "name": "Type",
            "values":[
               {
                  "id":8,
                  "name":"Premium",
               },
               {
                  "id":9,
                  "name":"Standard",
               },
               {
                  "id":10,
                  "name":"Luxary",
               }
            ]
         }
      ]
   }
};
</script>

JavaScript


new Vue({
  el: "#app",
  data: {
    modules: window.spdata,
    actives: {},
    message: '',
  },

  created() {
    this.modules.variations.properties.forEach((prop) => {
      this.actives[prop.id] = null
    });
  },

  methods: {
    activeProp(prop, val) {
      if (this.actives[prop.id] === val.id) {
        this.actives[prop.id] = null;
      } else {
        this.actives[prop.id] = val.id;
      }
    }
  }
})

Answer 1

您似乎需要使用Vue.set()来更新methods块内的数组，而不是方括号语法。您还应该为:key循环内的元素提供v-for。每当处理循环和数组时，这都是良好的卫生习惯。

由于Vue.js中的未知原因，反应性无法在循环内工作

1 个答案: