vueでの@commandから２つの引数をmethodに渡す方法を教えてください

Question

発生している問題・エラーメッセージ

下記に書いている"storeFunc"というmethodに引数を２つ使いたいのですが、@commandからどのようにmethodに送れば良いかわかりません。文法の知識なのですが、ネットで調べてもうまくhitしなかったので、ここで質問させていただきますご教授お願いします。

該当のソースコード

<el-dropdown @command="storeFunc" trigger="click">
    <el-dropdown-item command=""></el-dropdown-item>
<el-dropdown>
//---------------------------------------------------------------
storeFunc(storeId,storeName) {
    console.log(storeId,storeName);
}

試したこと

//うまくいかなかったが、試したコード↓
<el-dropdown @command="storeFunc" trigger="click">
<el-dropdown-item command="(store.Id,store.Name)"></el-dropdown-item>
</el-dropdown>
//--------------------------------------------------
methods:
storeFunc(storeId,storeName) {
console.log(storeId,storeName);
},

//また、一つの引数の関数への渡し方はわかります↓

<el-dropdown @command="storeFunc" trigger="click">
<el-dropdown-item command="store.Name"></el-dropdown-item>
</el-dropdown>
//--------------------------------------------------
methods:
storeFunc(storeName) {
console.log(storeName);
},

Comments

[euledge]

storeFuncは正しく vueのmethods:の中に記載されていますでしょうか？

[退会済みユーザー]

ありがとうございます。methods:に記入はされています。1つの引数だとうまくできるのですが、どうしても2つ引数を入れようとすると、文法的にまちがっているのか、うまくいきませんでした!

Answer 1

element-ui のdropdown-item が想定している@commandの使い方が違うようです。

説明が長くなるので、まずは動く実装例のリンクはこちらから

---

下記の公式ページの該当箇所 ElementUI component/dropdown を見たところ下記のように示されており

Dropdown Menu Item Attributes

Attribute	Description	Type	Accepted Values	Default
command	a command to be dispatched to Dropdown's command callback	string/number/object

itemとしてcommand属性に与えることができるのは文字列、数字、オブジェクトとなっています。
つまりここは関数の引数を書くのではなく@commandで指定したmethodsには属性として一つのものしか与えることができないということかと思います。

なので複数の値を渡すのであれば複数の項目を持つオブジェクトを渡せばよいのかと思います。

<div id="app">
  <el-row class="block-col-2">
    <el-col :span="12">
      <span class="demonstration">click to trigger</span>
      <el-dropdown @command="storeFunc" trigger="click">
        <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=store>Action 1</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</div>

new Vue({
  el: '#app',
  data: function() {
    return {
      store: {
        id: 1,
        name: 'aaa'
      }
    }
  },
  methods: {
    storeFunc(param) {
      console.log(param.id);
      console.log(param.name);
    },
  }
})

また、別解も存在します。
下記のElementのIssueにありましたが
Github Element-Issue3194

@Commandではなく@Clickを用いて通常のVueJSのメソッド呼び出しを行うことです。
これを使用する場合は通常の関数呼び出しになるので、引数として複数のパラメータを渡すことができます。

注意点としては ただの@clickではなく @click.native とする必要があります。

<div id="app">
  <el-row class="block-col-2">
    <el-col :span="12">
      <span class="demonstration">click to trigger</span>
      <el-dropdown>
        <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 @click.native="storeFunc(1,'aaa')">Action 1</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</div>

new Vue({
  el: '#app',
  methods: {
    storeFunc(id, name) {
      console.log(id);
      console.log(name);
    },
  }
})

Comments

[退会済みユーザー]

いえいえ、ありがとうございます！