1

我有一个类型数组，我使用 v-for 将它们显示为列表。当用户单击其中一个列表项时，我想在该类型的 allFields 对象中创建一个新对象，这意味着第一个键值对中的值应该是用户单击的任何“类型”。这是可能的，如果没有，有什么更好的方法来解决这个问题？提前致谢！

<ul>
   <li v-for="type in types" @click="addNew">{{ type }}</li>
</ul>


new Vue ({
    el: '#app',
    data: {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {

      }
    },
    methods: {
      addNew: function () {
        this.allFields = Object.assign({}, this.allFields, {
          field1: {
            'type': '?????',
            'label': ''
          }
        });
      },
    }
  });
4

2 回答 2

2

您应该将参数传递给您的addNew函数

传递价值

<ul>
   <li v-for="type in types" @click="addNew(type)">{{ type }}</li>
</ul>


new Vue ({
    el: '#app',
    data: {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {

      }
    },
    methods: {
      addNew: function (type) {
        this.allFields = Object.assign({}, this.allFields, {
          field1: {
            'type': type,
            'label': ''
          }
        });
      },
    }
  });

传递密钥

<ul>
   <li v-for="(type, key) in types" @click="addNew(key)">{{ type }}</li>
</ul>


new Vue ({
    el: '#app',
    data: {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {

      }
    },
    methods: {
      addNew: function (key) {
        this.allFields = Object.assign({}, this.allFields, {
          field1: {
            'type': this.types[key],
            'label': ''
          }
        });
      },
    }
  });
于 2018-03-28T09:17:28.080 回答
0

您还可以添加一个额外的属性并在您的方法中访问它。我添加了allFields变量以显示它有效。

new Vue ({
  el: '#app',
  data() {
    return {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {
      }
    }
  },
  methods: {
    addNew(e) {
      // access type attribute
      const type = e.target.type;
      // generate a name
      const name = `${type}-${Object.keys(this.allFields).map(key => key === type).length}`;

      this.allFields = Object.assign({}, this.allFields, {
        [name]: {
          'type': type,
          'label': ''
        }
      });
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="app">
      <ul>
        {{allFields}}
        <li v-for="type in types" @click="addNew" :type="type">{{ type }}</li>
      </ul>
    </div>
  </body>
</html>

一个补充。也许你想走花哨的 ES6 方式并使用spread operator. 然后你必须这样做：

改变：

this.allFields = Object.assign({}, this.allFields, {
  [name]: {
    'type': type,
    'label': ''
  }
});

至：

this.allFields = {
  ...this.allFields, // spread operator
  [name]: {
    'type': type,
    'label': ''
  }
}
于 2018-03-28T09:28:14.940 回答