vue.js - Vue组件传递json参数
问题描述
我似乎无法将 Vue 数据从模板传递到 Vue 组件,我使用 Handlebars,我需要从车把传递数据 Don't Show Nothing(对不起我的英语)我把代码放在这里https://codesandbox.io/s /fervent-hypatia-hq884?file=/src/App.vue
我尝试使用这个解决方案,但我不能 https://jsfiddle.net/Beowulfdgo/4qo1xjad/2/
<template>
<div id="app3">
<FiltroAudioannotations parametro="hola"></FiltroAudioannotations>
</div>
</template>
<script>
import FiltroAudioannotations from "./components/FiltroAudioannotations.vue";
export default {
name: "App3",
components: {
FiltroAudioannotations,
}
};
</script>
这是我的组件
<template>
<div>Audio annotations
Aqui
{{otro}}
<button v-on:click="getTodos()"></button>
<table>
<thead>
<tr>
<th>Titulo</th>
<th>Lengua Terminal</th>
<th>Gpo de Lenguas</th>
<th>Comunidad</th>
<th>Hablantes</th>
<th>Genero y Duración</th>
</tr>
</thead>
<tr>
<td><input type="text" id="titulo" name="titulo"> </td>
<td><input type="text" id="lengua" name="lengua"> </td>
<td><input type="text" id="gpo_lengua" name="gpo_lengua"></td>
<td><input type="text" id="comunidad" name="comunidad"></td>
<td><input type="text" id="hablantes" name="hablantes"></td>
<td><input type="text" id="genero" name="genero"></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "FiltroAudioannotations",
props: {
parametro: Object,
},
data() {
return {
json: {},
result: null,
otro:"nuevo"
}
},
methods: {
setJson (payload) {
this.json = payload
},
async getTodos() {
let response = await this.axios.get("http://localhost:40923/audioannotations/filter")
if (response) {
this.response = response.data;
console.log(response.data)
}
}
}
}
</script>
这是我的车把文件
<div id="app3" >
<FiltroAudioannotations :json="setJson({ foo: 'bar' })" >
{{json}}
</FiltroAudioannotations>
</div>
<table>
</table>
解决方案
您试图setJson
从父级调用子级的方法,但这是行不通的。删除该方法并将孩子的json
数据更改为道具:
应用模板:
<div id="app">
<FiltrosAudioannotations :json="{ foo: 'bar' }"></FiltrosAudioannotations>
</div>
FiltrosAudioannotations
实例:
export default {
name: "FiltroAudioannotations",
props: {
food: Object,
json: Object,
},
data() {
return {
result: null,
otro: "nuevo",
};
},
};
推荐阅读
- python - 如何从文本文件加载 JSON 数据,然后在 python 中添加到该数据?
- angular - 为什么我在尝试路由我的角度页面时不断收到相同的错误?
- python - TensorFlow 检查点自定义地图
- c# - 使用类将子项添加到带有按钮的 ListView
- python-3.x - (python)os.kill 中的 2 个参数是什么?
- ruby-on-rails - 使用 ActiveStorage 服务直接上传到 S3 的视频
- grpc - GRPC:保留对流的引用以将数据发送到多个客户端
- google-maps - 将自定义停车层添加到 Google 地图
- stripe-payments - 为 Web 上的 Apple Pay 支付处理添加商家域
- git - 由于身份验证失败,无法将本地 git 推送到 Azure DevOps git repo,但需要正确的密码