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

Question

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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 File

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

The example above is from https://element.eleme.io/#/en-US/component/dropdown#dropdown here is a codepen for this https://codepen.io/pen/?&editable=true=https%3A%2F%2Felement.eleme.io%2F

So, I am trying to pass "field" data from js file to command attribute in {{fields}} 1 instead of "a". My assumption was to pass using the two curly brackets, but i think command attribute only takes a string. Any idea? Thanks.

Answer 1

You can pass an object to the command option, but you have to add colon before 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');
      }
    },