Home>

I created an API that returns JSON using Laravel.
I want to pass this to vue.js and do the drawing process, but only theshowevent ofmethodsdoes not work,
From the following code, the contents of JSON are called so thatshow1of methods is placed in the@ click = "article.show"part, and is defined in another component This code is displayed by the modal.
show1is in the JSON, but I don't really think it should fire the event this way ...
Please let me know if there is any other good way.

<template>
  <v-app>
    <v-row justify = "center">
      <v-col v-for = "(article, id) in articles": key = "id">
        <v-card elevation = 20 slot = "activator" @ click = "article.show">
          <v-img height = "200px" v-bind: src = "article.image" alt = "">
            <v-card-title>{{article.title}}</v-card-title>
          </v-img>
          <v-card-subtitle>{{article.date}}</v-card-subtitle>
          <v-card-text>
             {{article.name}} 
             {{article.place1}} 
             {{article.place2}} 
          </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 \ u309u \ u964 \ u3059 \ u3050 \ u306e \ u8e0f \ u5207 "," place2 ": null}]
  • Answer # 1

    article.showcontains only the character string "show1", so the function with the same name cannot be executed.
    If you want to open the dialog component linked to id, how about operating with id as an argument as follows?