[英]How to refference input in vue js with v-model?
我是 vue 的新手,我試圖在粘貼鏈接后從具有 v-model="embed.url" 的字段發出獲取請求。 粘貼后的事件效果很好,但是我不知道如何使用 v-model="embed.url" 引用輸入並獲取數據。
當我嘗試下面的代碼時出現錯誤:[Vue warn]: Error in v-on handler: "ReferenceError: embed is not defined" and ReferenceError: "embed is not defined"
我的Vue代碼:
<script type="text/javascript">
axios.defaults.xsrfHeaderName = "X-CSRFToken";
new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data () {
return {
embed: {
url: '',
title: '',
description: '',
type: '',
thumbnail_url: '',
html: '',
},
isPaste: false,
embedsinfo: [],
}
},
methods: {
formSubmit(e) {
e.preventDefault();
let currentObj = this;
axios.post('http://wegemoc.local:8000/recipes/recipe/embed/add/', {
url: this.url,
})
.then(function (response) {
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
},
paste() {
this.isPaste = true;
},
input() {
if (this.isPaste) {
axios.get('http://iframe.ly/api/oembed?url=' + embed.url + '&api_key=493c9ebbdfcbdac2a10d6b')
.then(response => (this.embedsinfo = response))
isPaste = false;
}
}
},
});
我的表格:
<div id="app">
!! embedsinfo.title !!
<form method="post" class="margin-bottom-25" @submit="formSubmit">
{% csrf_token %}
<div class="form-group">
<label for="formGroupExampleInput">Adres przepisu*</label>
<input type="url" class="form-control" placeholder="Url" @paste="paste" @input="input" v-model="embed.url">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Tytuł</label>
<input class="form-control" placeholder="Title" v-model="embed.title">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Description</label>
<input type="textarea" class="form-control" id="formGroupExampleInput2" placeholder="Description" v-model="embed.description">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Thumbnail_url</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Tthumbnail_url" v-model="embed.thumbnail_url">
</div>
<button type="submit" class="btn btn-success-gradiant">Dodaj link</button>
</form>
</div>
當您不將 Vue 用作單組件文件時,您的數據屬性必須是 object 而不是 function。 將您的數據屬性更改為 object,然后試一試。
new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data: {
return {
embed: {
url: '',
...
};
},
...
此外,您必須使用“this”訪問您的數據 embed.url 屬性,就像您在代碼中引用其他屬性的方式一樣。
if (this.isPaste) {
axios.get('http://iframe.ly/api/oembed?url=' + this.embed.url + '&api_key=493c9ebbdfcbdac2a10d6b')
.then(response => (this.embedsinfo = response))
isPaste = false;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.