Vue.jsのmethodsをJSONを返してイベントを発火させる方法について

Question

Laravelを使ってJSONを返すAPIを作成しました。
これをvue.jsに渡し、描画する処理を行いたいのですが、methodsのshowイベントだけ動きません、、
以下のコードより、@click="article.show"の部分にmethodsのshow1が入るよう、JSONの内容が呼び出され、別コンポーネントで定義されているモーダルが表示させるコードとなっています。
show1はJSONのなかに入っていますが、あまりこの方法でイベントを発火させるべきだとは思っていません...
何か他に良い方法があれば教えていただきたいです。

<template>
  <v-app>
    <v-row justify="center" style="margin: 0" >
      <v-col v-for="(article, id) in articles" :key="id">
        <v-card class="card" elevation=20 slot="activator" @click="article.show">
          <v-img class="white--text align-end" height="200px" v-bind:src="article.image" alt="">
            <v-card-title class="title">{{ article.title }}</v-card-title>
          </v-img>
          <v-card-subtitle class="pb-0">{{ article.date }}</v-card-subtitle>
          <v-card-text class="text--primary">
            <div class="name">{{ article.name }}</div>
            <div>{{ article.place1 }}</div>
            <div>{{ article.place2 }}</div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <My-component ref="dialog1"></My-component>
  </v-app>
</template>

<script>
  import My-component from "./my-component";
  import axios from 'axios';
  export default {
    name: "ArticleCard",
    methods: {
      show1() {
        this.$refs.dialog1.open();
      },
    components: {
      My-component
    },
    data() {
      return {
        articles: [],
      }
    },
    mounted() {
      axios
          .get("http://127.0.0.1:8000/api/articles/")
          .then(response => (this.articles = response.data))
    }
  }
</script>

<style scoped>
  .card {
    max-width: 400px;
    max-height: 320px;
    margin: 0 auto;
    ovarflow-y: hidden;
  }
  
  .title {
    margin-bottom: -15px;
  }
  
  .name {
    margin-bottom: 5px;
  }
</style>

[{"id":1,"show":"show1","image":"img/image1.jpeg","title":"\u90fd\u96fb\u8352\u5ddd\u7dda\u5b66\u7fd2\u9662\u4e0b\u99c5\u8e0f\u5207","date":"2019\u5e7411\u67081\u65e5","name":"\u30a2\u30cb\u30e1:\u51b4\u3048\u306a\u3044\u5f7c\u5973\u306e\u80b2\u3066\u304b\u305fOP","place1":"\u90fd\u96fb\u8352\u5ddd\u7dda\u5b66\u7fd2\u9662\u4e0b\u99c5\u3092\u964d\u308a\u3066\u3059\u3050\u306e\u8e0f\u5207","place2":null}]

Answer 1

article.showにはあくまで文字列「show1」が入っているだけなので同名の関数を実行することはできません。
idと紐付いたダイアログコンポーネントを開きたい場合は以下のようにしてidを引数にして動作させる方法ではどうでしょうか。

<template>
  <v-app>
    <v-row justify="center" style="margin: 0" >
      <v-col v-for="(article, id) in articles" :key="id">
        <v-card class="card" elevation=20 slot="activator" @click="show(article.id)">
　　　　　　<!-- 中略 -->
        </v-card>
      </v-col>
    </v-row>

    <My-component ref="dialog1"></My-component>
  </v-app>
</template>

<script>
  import My-component from "./my-component";
  import axios from 'axios';
  export default {
    name: "ArticleCard",
    methods: {
      show(id) {
        this.$refs[`dialog${id}`].open();
      }
    }
  }
</script>

Comments

[退会済みユーザー]

素早い解答本当に有難う御座います！！！
解決できました！！！
少し泣きそうです,,,