当我修改另一个对象 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>

注意：我知道你给出的 sn-p 只是更大的一部分，但你真的不应该混合使用 jQuery 和 Vue。您应该在 Vue 实例的方法中进行所有更改。从长远来看，这将更易于维护。