vue.js/javascript新建对象onclick，其中一个值为你点击的列表项的值

Question

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

<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': ''
          }
        });
      },
    }
  });

Answer 1

您应该将参数传递给您的 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': ''
          }
        });
      },
    }
  });

Answer 2

您还可以添加一个额外的属性并在您的方法中访问它。我添加了 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': ''
  }
}

vue.js/javascript新建对象onclick，其中一个值为你点击的列表项的值

Vue.js/javascript create new object onclick, with one value being the value of the list item you clicked on

javascript

listitem

key-value

vue.js

v-for

传递值

传递密钥