Vue:如何在后ApI中使用v模型

Question

我在vue js中有下面的代码，我想通过使用AddCategory更新模型的数据，它运行良好，另一方面，我想使用下面的发布数据将其发布到API Url，但当我设置v-model="职位。AddCategory"；没用，有办法吗？

<b-form-input
id="input"
type="text"
name="AddCategory"
v-model="AddCategory" //v-model="posts.AddCategory" didn't work
placeholder="categories"
required
/>
<div
class="categories"
v-for="(category, index) in categories"
:key="index"
@click="Add(index, AddCategory)"
>
<mark> {{ category.category_name }} </mark>

<script>
export default {
name: "postComponent",
components: {
Editor: PrismEditor,
},
data() {
return {
categories: [],
selectedIndex: null,
isediting: false,
AddCategory: "",
posts: {
title: null,
question: null,
code: require("../example.js").default /* eslint-enable */,
},
};
},
methods: {
Add(AddCategory, index) {
this.AddCategory = AddCategory;
this.selectedIndex = index;
this.isediting = true;
},

Answer 1

您的v-model=posts.AddCategory将无法工作，因为您遇到了vue中定义的对象警告之一https://v2.vuejs.org/v2/guide/reactivity.html#For-对象。你能做的是在你的Add方法中首先你可以这样做：

Add(category,index){
this.$set(this.post,'AddCategory',category);
.... 
}