Question

美好的一天，我正在使用Vuejs进行简单的内联编辑功能。请看一下这个jsbin。

用户信息。使用Edit按钮列出，单击时我将这些按钮转换为输入/选择字段并使用辅助方法填充相应的选项。

我的问题是，一旦我填充选择选项，即使我更改选择值，也会调用我的辅助方法。如何更改此设置只加载一次并使用它们。另外，如何在点击save按钮时根据需要验证当前行字段？

Answer 1

试试这个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Input 1: <input id="input1" value="11111"></div>
<div>Input 2: <input id="input2" value="22222"></div>

将模板更改为此。

  new Vue({
    el: '#app',

    data: {
      users: [
        {name: 'Jhon', city:'Newyork', country: 'US', country_id:'23', city_id:'4'},
        {name: 'Ali', city:'London', country: 'UK', country_id:'13', city_id:'33'},
        {name: 'Raj', city:'Delhi', country: 'IN', country_id:'3', city_id:'11'},
      ],
      cities: [
          {id:'4', val:'Newyork', country_id:'23'},
          {id:'33', val:'London', country_id:'13'},
          {id:'11', val:'Delhi', country_id:'3'},
         ],
      countries: [
          {id:'23', val:'US'},
          {id:'13', val:'UK'}, 
          {id:'3', val:'IN'}, 
        ]

    },
    computed:{
      citiesByCountry(){
        return this.countries.reduce((acc, country) => {
          acc[country.id] = this.cities.filter(c => c.country_id == country.id)
          return acc
        }, {})
      }
    },
    methods: {
      edit :function(obj){
        this.$set(obj, 'editmode', true);
      },
      save : function(obj){
        this.$set(obj, 'editmode', false);
      },
      cloneLast:function(){
        var lastObj = this.users[this.users.length-1];
        lastObj = JSON.parse(JSON.stringify(lastObj));
        lastObj.editmode = true;
        this.users.push(lastObj);
      },

    }
  })

工作example。

使用选择框选项调用问题进行内联编辑

1 个答案: