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 theshow
event ofmethods
does not work,
From the following code, the contents of JSON are called so thatshow1
of methods is placed in the@ click = "article.show"
part, and is defined in another component This code is displayed by the modal.
show1
is 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
Related articles
- (vuejs) about errors in the processing of methods
- i want to use child component methods in vuejs
- i want to use v-on: click argument in methods in vuejs but it doesn't work
- Vuejs computer properties computed and methods
- Utility methods in Vuejs [Recommended]
- Create templates with Vuejs methods and composite using multiple templates
- Methods to use global events gracefully in Vuejs
- V-model directives in Vuejs and methods for binding form elements
- Summary of communication methods between Vuejs components [Recommended]
- vuejs implements v-model and {{}} instruction methods
- $set and array update methods in vuejs
- vuejs $refs and $emit parent-child component interaction methods
- VueJs proxy interface to local methods using webpack
Trends
article.show
contains 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?