<div class="list">
<h1>文章列表</h1>
<ul>
<li v-for="(v, k) of list" :key="k">
文章名称: {{ v.title }}----------------({{ v.author.name }})
</li>
</ul>
</div>
<div class="form">
<h1>添加文章</h1>
标题：<input v-model="formData.title" type="text"><br>
作者名称: <input v-model="formData.author.name" type="text"><br>
作者年龄: <input v-model.number="formData.author.age" type="text"><br>
文章内容: <textarea v-model="formData.content" name="" id="" cols="30" rows="10"></textarea>
<button @click="createArticle">添加</button>
</div>
</div>
</template>
<script>
import { getArticleList, createArticle } from './graphql/article'
export default {
name: 'app',
data() {
return {
list: [],
formData: {
title: '',
content: '',
author: {
name: '',
age: ''
}
}
}
},
mounted() {
this.initData()
},
methods: {
initData() {
getArticleList({first: 0})
.then(res=>{
console.log('request success')
console.log(res.data.articleList.length)
this.list = res.data.articleList
})
.catch(err=>{
console.log(err)
})
},
createArticle() {
createArticle(this.formData)
.then(()=>{
this.initData()
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
效果如下:
总结
以上所述是小编给大家介绍的vue中使用GraphQL的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
