英文:
Why doesn't Vue detect the variable value change immediately?
问题
Here is the translated code portion:
我有一个从后端获取数据的方法，并将我的数据变量设置为从后端获取的数据。我在onMounted vue方法中调用这个方法。但是当我在组件中显示数据时，它是空的，长度为0。奇怪的是，如果我对组件进行任何更改，数据就会正确显示，并且长度会更改为正确的长度。
这是我的代码：
<script setup>
import SearchBar from '@/Components/Admin/SearchBar.vue';
import { onMounted, reactive } from 'vue';
import moment from 'moment';
let data = [];
onMounted(() => {
getBreeders();
})
const getBreeders = () => {
axios.get(route('tagsmodal.breeders')).then(response => {
data = response.data;
console.log(data);
})
}
</script>
和组件：
{{ 'the length is '+data.length }}
<div class="table-view" id="entityTableView">
<table class="fullwidth">
<thead>
<tr>
<th scope="col" data-attribute="title" class="orderable">Title</th>
<th scope="col" data-attribute="postDate" class="ordered asc">Post Date</th>
</tr>
</thead>
<tbody id="Tbody" >
<tr v-for="(entity,index) in data" :key="entity.id" >
<td> {{entity.name}} </td>
<td> {{ moment(String( entity.created_at)).format('YYYY-MM-DD') }} </td>
</tr>
</tbody>
</table>
Please note that I have only translated the code portion and not provided answers to the translation request.
英文:
I have a method that gets data from the backend, and set my data variable to the data that's coming from the backend. I call the method inside the onMounted vue method. But when I display the data in my component it's empty and the length is 0. Strange enough, if I made any changes to the component the data displays correctly and the length changes to the correct length.
here is my code:
<script setup>
import SearchBar from '@/Components/Admin/SearchBar.vue';
import {onMounted, reactive} from 'vue'
import moment from 'moment'
let data = [];
onMounted(() => {
getBreeders();
})
const getBreeders = () => {
axios.get(route('tagsmodal.breeders')).then(response=>{
data = response.data;
console.log(data);
})
}
</script>
and the component:
{{ 'the length is '+data.length }}
<div class="table-view" id="entityTableView">
<table class=" fullwidth">
<thead>
<tr>
<th scope="col" data-attribute="title" class="orderable">Title</th>
<th scope="col" data-attribute="postDate" class="ordered asc">Post Date</th>
</tr>
</thead>
<tbody id="Tbody" >
<tr v-for="(entity,index) in data" :key="entity.id" >
<td> {{entity.name}} </td>
<td> {{ moment(String( entity.created_at)).format('YYYY-MM-DD') }} </td>
</tr>
</tbody>
</table>
the data length is always zero, and no data is displayed until I made some change to the component
答案1
得分: 2
你需要将 data 转换为一个 ref，这样 Vue 才能检测到它的变化:
import {ref} from 'vue'
const data = ref([])
在你的 getBreeders() 方法中，然后将获取的数据赋值给 ref 的值:
const getBreeders = async () => {
const response = await axios.get(route('tagsmodal.breeders'))
data.value = response.data;
}
然后就是这样。
英文:
You have to turn data into a ref, so that Vue can detect changes to it:
import {ref} from 'vue'
const data = ref([])
In your getBreeders() method, you then assign the fetched data to the ref's value:
const getBreeders = async() => {
const response = await axios.get(route('tagsmodal.breeders'))
data.value = response.data;
}
And that should be all
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论