我们可以在 element-ui 下拉列表的 command 属性中传递 vue 数据对象吗？

Question

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">{{fields}} 1</el-dropdown-item>
    <el-dropdown-item command="b">Action 2</el-dropdown-item>
    <el-dropdown-item command="c">Action 3</el-dropdown-item>
    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</div>

JS 文件

var Main = {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    },
  data() {
        return {
            fields: 'test'
        }
  }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

以上例子来自https://element.eleme.io/#/en-US/component/dropdown#dropdown 这是 https://codepen.io/pen/?&editable=true=https%3A%2F%2Felement.eleme.io%2F

的代码笔

因此，我试图将“字段”数据从 js 文件传递到 {{fields}} 1 中的命令属性而不是“a”。我的假设是使用两个大括号传递，但我认为命令属性只需要一个字符串。任何的想法？谢谢。

Answer 1

您可以将一个对象传递给命令选项，但您必须在command

之前添加冒号

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item :command="{action: 'a', fields: fields}">{{fields}} 1</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</div>

JS

methods: {
      handleCommand(command) {
        this.$message('click on item ' + command.a + 'command.fields');
      }
    },

我们可以在 element-ui 下拉列表的 command 属性中传递 vue 数据对象吗？

Can we pass vue data object in command attribute in element-ui dropdown?

frontend

vue-component

vuejs2

element-ui