admin管理员组文章数量:1316657
Thanks for reading my question.
I'm trying to get the new <script setup>
syntax (Composition API) with Vue.js 3.2 and axios running.
With the normal syntax my code looks something like:
<script>
import axios from 'axios'
export default {
name: 'GetRequest',
data () {
return {
infos: null
}
},
mounted () {
axios
.get('/')
.then(response => (this.infos = response.data))
}
}
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
This works just fine, but I use a template () for my projekt which works with the new <script setup>
.
I already found some solutions like:
<script setup>
import {onMounted} from "vue";
const {ref} = require("vue");
const axios = require("axios");
const info = ref([])
onMounted(async () => {
await axios
.get('/')
.then(response => {
this.info = response.data
})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
but it gives me 'this.infos' is assigned a value but never used.
Does anyone know how I can assigne the value to the variabel and call it in the <template>
?
Update:
I found the solution by using infos.value
instead of this.infos
<script setup>
import {onMounted} from "vue"
const {ref} = require("vue")
const axios = require("axios")
const infos = ref([])
onMounted(async () => {
await axios
.get('/')
.then(response => {
infos.value = response.data
})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
```
Thanks for reading my question.
I'm trying to get the new <script setup>
syntax (Composition API) with Vue.js 3.2 and axios running.
With the normal syntax my code looks something like:
<script>
import axios from 'axios'
export default {
name: 'GetRequest',
data () {
return {
infos: null
}
},
mounted () {
axios
.get('https://api.predic8.de/shop/products/')
.then(response => (this.infos = response.data))
}
}
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
This works just fine, but I use a template (https://github./justboil/admin-one-vue-tailwind) for my projekt which works with the new <script setup>
.
I already found some solutions like:
<script setup>
import {onMounted} from "vue";
const {ref} = require("vue");
const axios = require("axios");
const info = ref([])
onMounted(async () => {
await axios
.get('https://api.predic8.de/shop/products/')
.then(response => {
this.info = response.data
})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
but it gives me 'this.infos' is assigned a value but never used.
Does anyone know how I can assigne the value to the variabel and call it in the <template>
?
Update:
I found the solution by using infos.value
instead of this.infos
<script setup>
import {onMounted} from "vue"
const {ref} = require("vue")
const axios = require("axios")
const infos = ref([])
onMounted(async () => {
await axios
.get('https://api.predic8.de/shop/products/')
.then(response => {
infos.value = response.data
})
})
</script>
<template>
<div id="app">
{{ infos }}
</div>
</template>
```
Share
Improve this question
edited Jul 21, 2022 at 10:33
Taraman
asked Jan 25, 2022 at 22:17
TaramanTaraman
3153 silver badges9 bronze badges
2 Answers
Reset to default 5It's better to use inject
for importing axios
in each ponent. This way you can create some interceptors if they needed as well...
First you should install the axios plugin for vue.js
.
> npm install --save axios vue-axios
When the installation finished just import the axios
like below example:
main.js
import { createApp } from "vue";
import axios from "./plugins/axios";
import VueAxios from "vue-axios";
const app = createApp(App);
// Axios Plugin
app.use(VueAxios, axios);
app.provide("axios", app.config.globalProperties.axios);
inside any ponent
import { inject } from "vue";
const axios = inject('axios');
// using axios as usual
Note: I used the <script setup>
inside the ponent example.
PS: You can create an axios
instance inside the ./plugins/axios.js
file if you need to use interceptors
otherwise just import the axios
as always inside main.js
file!
- In your template you are accessing "infos" but the declared variable is "info"
- In your onMounted callback your assignment should be without "this" just "info = response.data"
Any variable declared at the top level script would be accesible from the template.
More info here https://v3.vuejs/api/sfc-script-setup.htm and here https://v3.vuejs/guide/position-api-setup.html
本文标签: javascriptVuejs new script setup with axiosStack Overflow
版权声明:本文标题:javascript - Vue.js new script setup with axios - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742007734a2412300.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论