Аксиос поставил запрос на выдачу - PullRequest
0 голосов
/ 18 сентября 2018

Я сейчас строю блог и застрял в части редактирования статьи.

Итак, на странице редактирования статьи я использую v-модель для извлечения данных из хранилища vue:

<form action="/http://localhost:4000/articles" method="POST">       
  <div role="button" type="submit" @click="submitArticle">Save</div>

    <div class="article-writing__inner" v-for="article in articles">

     <div class="title-offset">Title</div>
      <input class="input-title"  type="text" v-model="article.title"/>

     <tinymce id="d1"v-model="article.text"></tinymce>

   </div>
</form>

Я использую вычисляемое свойство для цикла v-for:

computed: {
    articles() {
       return this.$store.state.articles
      }
 }

И, наконец, я отправляю свои данные в API с такими аксиосами, как это:

methods: {
        submitArticle() {
            axios.put('http://localhost:4000/articles/:id', {
                title: article.title,
                text: article.text,
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }

Как я и ожидал, я не могу получить доступ к данным магазина (v-модели) в axios.В шаблоне создания статьи я использовал v-модель, как показано ниже, и мне удалось опубликовать с помощью title: this.title.

data() {
  return {
    title: "",
    text: ""
  }
}

Как связать v-модель с функцией данных локального компонента или с аксиосами?Или это другой способ сделать это?

Спасибо за потраченное время :)

1 Ответ

0 голосов
/ 18 сентября 2018

Артикул не установлен ни к чему в пут-вызове axios.Один из способов получить значения вашего состояния в вызове axios - сделать следующее.

submitArticle() {
    let vm = this;
    axios.put('http://localhost:4000/articles/:id', {
            title: vm.article.title,
            text: vm.article.text,
        })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
}

Все зависит от того, что означает «this» в контексте вызова axios.

...