Question

我目前正在建立一个博客，并且停留在编辑文章部分。

因此，在编辑文章页面上，我使用v-model以便从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
      }
 }

最后，我将数据通过axios发送到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);
                });
        }
    }

如我所料，我无法访问axios中的商店（v模型）数据。在创建文章模板中，我使用了如下所示的v模型，并设法通过title: this.title进行发布。

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

如何从本地组件数据功能或axios绑定v模型？或者这是另一种方法？

谢谢您的时间：）

Answer 1

在对axios的put调用中，Article没有设置为任何内容。在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);
            });
    }
}

这与在axios调用上下文中确定“ this”的范围有关。

Axios放置请求问题

1 个答案: