Как связать ввод в vue js с v-моделью?

Question

Я новичок в vue, и я пытаюсь сделать запрос на получение из поля, которое имеет v-model = "embed.url" после вставки ссылки. Событие после вставки работает хорошо, но я не знаю, как ссылаться на ввод с помощью v-model = "embed.url" и получать данные.

Когда я пытаюсь ввести код ниже, появляется ошибка: [Vue warn]: Ошибка в обработчике v-on: «ReferenceError: embed is not defined» и ReferenceError: «embed is not defined»

My vue code:

<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>

Answer 1

Если вы не используете Vue как однокомпонентные файлы, ваше свойство данных должно быть объектом, а не функцией. Измените свойство данных на объект, а затем попробуйте.

new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data: {
   return {
      embed: {
          url: '',
          ...
      };
},
...

Также вы должны получить доступ к свойству data embed.url, используя "this", как вы ссылались на другие свойства в своем коде.

if (this.isPaste) {
  axios.get('http://iframe.ly/api/oembed?url=' + this.embed.url + '&api_key=493c9ebbdfcbdac2a10d6b')
  .then(response => (this.embedsinfo = response))
  isPaste = false;
}