当我修改另一个对象 VUE 时，动态对象发生了变化

Question

这是我的问题的例子：

const app = new Vue({
  el: '#mainCreate',
  data: {
    v_total : 0,
    test : [],
  },
});
function f_test(){
  var d = [
    {title : 'p1', price : 0},
    {title : 'p2', price : 2},
    {title : 'p3', price : 0},
    {title : 'p4', price : 4}
  ]
  $.each(d, function(index,date){
    Vue.set(app.test, index, date);
  });
}
function changeV(){
	app.v_total += 10;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
<div id="mainCreate">
  <h4>I input the charge with a check according to a v-if, but look what happens if I select an input that was not checked and change the value of v_total .... reload the input</h4>
  v_total = {{ v_total}}
  <br>
    <span v-for="date in test">
      {{ date.title }}
      <input type="checkbox"
             name="featuresBox"
             v-bind:checked="date.price == 0">
      <br>
    </span>
    <button onClick="f_test()">create object</button>
    <button onClick="changeV()">change app.v_total</button>
</div>

如果我只是更改app.v_total，因为输入失去了我放入v-if的check？(我认为这是因为 VUE 认为测试也已更新(并且不应该是这样。

Answer 1

当您选中复选框时，您将"丢失状态"，因为每个复选框的data.price没有任何变化，请参阅：

const app = new Vue({
  el: '#mainCreate',
  data: {
    v_total : 0,
    test : [],
  },
});
function f_test(){
  var d = [
    {title : 'p1', price : 0},
    {title : 'p2', price : 2},
    {title : 'p3', price : 0},
    {title : 'p4', price : 4}
  ]
  $.each(d, function(index,date){
    Vue.set(app.test, index, date);
  });
}
function changeV(){
	app.v_total += 10;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
<div id="mainCreate">
  v_total = {{ v_total}}
  <br>
    <span v-for="date in test">
      {{ date.title }}
      <input type="checkbox"
             name="featuresBox"
             v-bind:checked="date.price == 0"> date.price: {{ date.price }} - will not change when you mark the checkbox
      <br>
    </span>
    <button onClick="f_test()">create object</button>
    <button onClick="changeV()">change app.v_total</button>
</div>

当您更改v_total时，它似乎会重置复选框，因为更改会导致整个组件的重新渲染。

它只是重置复选框的显示，不会重置复选框的值，仅仅是因为它们的基础数据从未更改。

解决方案/解决方法：添加一些内容以在选中复选框时真正更改data.prince，例如在 change 事件上执行的一些代码，例如：

<input ... v-on:change="date.price = (date.price ? 0 : 1)">

修复了下面的演示。

const app = new Vue({
  el: '#mainCreate',
  data: {
    v_total : 0,
    test : [],
  },
});
function f_test(){
  var d = [
    {title : 'p1', price : 0},
    {title : 'p2', price : 2},
    {title : 'p3', price : 0},
    {title : 'p4', price : 4}
  ]
  $.each(d, function(index,date){
    Vue.set(app.test, index, date);
  });
}
function changeV(){
	app.v_total += 10;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
<div id="mainCreate">
  v_total = {{ v_total}}
  <br>
    <span v-for="date in test">
      {{ date.title }}
      <input type="checkbox"
             name="featuresBox"
             v-on:change="date.price = (date.price ? 0 : 1)"
             v-bind:checked="date.price == 0"> date.price: {{ date.price }}
      <br>
    </span>
    <button onClick="f_test()">create object</button>
    <button onClick="changeV()">change app.v_total</button>
</div>

注意：我知道你给出的片段只是更大东西的一部分，但你真的不应该混合jQuery和Vue。你应该在 Vue 实例的方法中完成所有这些更改。从长远来看，这将更容易维护。