Question

以下是我的问题示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如果我只是更改app.v_total，因为输入丢失了我check放置的v-if？（我认为这是因为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，例如在{{1}上执行的某些代码事件，如：

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

注意：我理解你提供的代码片段只是更大的一部分，但你真的不应该混合使用jQuery和Vue。你应该在Vue实例的方法中做所有改变。从长远来看，这将更加可维护。

当我修改另一个对象VUE时，动态对象被更改

1 个答案: