“数据错误不是来自Vue 3浏览器刷新”

huangapple go评论71阅读模式
英文:

Data error not coming from Vue 3 browser refresh

问题

I am pulling data from database with Axios. With onMounted, the data is coming, but the data is not visible without any action on the browser. I am using v-for. When there is a change, the data comes in. For example, when I scroll, the data comes. I couldn't solve it, what should I do? Where am I doing wrong?

It looks like in the video below:
https://s11.gifyu.com/images/Ekran-Kaydi-2023-04-17-09.21.31-1.gif

<script setup>
import { requiredValidator } from '@validators'
import { onMounted, ref } from "vue"
import axios from '@axios'

const { t } = useI18n()
const route = useRoute()
const name = ref('')
const tag = ref('')
const checkbox = ref(false)
let permissions = ref([])
let selectedPermissions = ref([])

onMounted(async () => {
    try {
        const { data } = await axios.get('/api/users/roles/role-permissions')
        permissions = data.permissions
    } catch (e) {
        console.log(e)
    }
});


</script>

<template>
    <VCard>
        <VCardTitle>
            Rol Ekle
        </VCardTitle>
        <VCardText>
            <VForm class="mt-5">
                <VRow>
                    <VCol
                        cols="12"
                        md="6"
                    >
                        <VTextField
                            v-model="name"
                            label="Rol Parent"
                            placeholder="super-admin"
                            :rules="[requiredValidator]"
                        />
                    </VCol>
                    <VCol
                        cols="12"
                        md="6"
                    >
                        <VTextField
                            v-model="tag"
                            label="Rol Adı"
                            placeholder="Süper Yönetici"
                        />
                    </VCol>
                    <VCol
                        cols="12"
                        md="12"
                    >
                        <h3>Yetkiler</h3>
                    </VCol>
                    <VCol
                        v-for="(perm, index) in permissions" :key="perm.id"
                        cols="12"
                        md="3"
                    >
                        <VCheckbox
                            :label="perm.value"
                            :value="perm.id"
                            v-model="selectedPermissions"
                        />
                    </VCol>
                    <VCheckbox
                        label="perm.value"
                        value="perm.id"
                    />

                    <VCol
                        cols="12"
                        class="d-flex gap-4"
                    >
                        <VBtn type="submit">
                            Ekle
                        </VBtn>

                        <VBtn
                            type="reset"
                            color="warning"
                            variant="tonal"
                        >
                            Sıfırla
                        </VBtn>

                        <VBtn
                            to="/roles"
                            color="secondary"
                            variant="tonal"
                        >
                            Geri Dön
                        </VBtn>
                    </VCol>
                </VRow>
            </VForm>
        </VCardText>
    </VCard>

</template>


<route lang="yaml">
meta:
    action: create
    subject: roles
</route>
英文:

I am pulling data from database with Axios. With onMounted, the data is coming, but the data is not visible without any action on the browser. I am using v-for. When there is a change, the data comes in. For example, when I scroll, the data comes. I couldn't solve it, what should I do? Where am I doing wrong?

It looks like in the video below:
https://s11.gifyu.com/images/Ekran-Kaydi-2023-04-17-09.21.31-1.gif

&lt;script setup&gt;
import {requiredValidator} from &#39;@validators&#39;
import {onMounted, ref} from &quot;vue&quot;;
import axios from &#39;@axios&#39;

const {t} = useI18n()
const route = useRoute()
const name = ref(&#39;&#39;)
const tag = ref(&#39;&#39;)
const checkbox = ref(false)
let permissions = ref([])
let selectedPermissions = ref([])

onMounted(async () =&gt; {
    try {
        const {data} = await axios.get(&#39;/api/users/roles/role-permissions&#39;)
        permissions = data.permissions
    } catch (e) {
        console.log(e)
    }
});


&lt;/script&gt;

&lt;template&gt;
    &lt;VCard&gt;
        &lt;VCardTitle&gt;
            Rol Ekle
        &lt;/VCardTitle&gt;
        &lt;VCardText&gt;
            &lt;VForm class=&quot;mt-5&quot;&gt;
                &lt;VRow&gt;
                    &lt;VCol
                        cols=&quot;12&quot;
                        md=&quot;6&quot;
                    &gt;
                        &lt;VTextField
                            v-model=&quot;name&quot;
                            label=&quot;Rol Parent&quot;
                            placeholder=&quot;super-admin&quot;
                            :rules=&quot;[requiredValidator]&quot;
                        /&gt;
                    &lt;/VCol&gt;
                    &lt;VCol
                        cols=&quot;12&quot;
                        md=&quot;6&quot;
                    &gt;
                        &lt;VTextField
                            v-model=&quot;tag&quot;
                            label=&quot;Rol Adı&quot;
                            placeholder=&quot;S&#252;per Y&#246;netici&quot;
                        /&gt;
                    &lt;/VCol&gt;
                    &lt;VCol
                        cols=&quot;12&quot;
                        md=&quot;12&quot;
                    &gt;
                        &lt;h3&gt;Yetkiler&lt;/h3&gt;
                    &lt;/VCol&gt;
                    &lt;VCol
                        v-for=&quot;(perm, index) in permissions&quot; :key=&quot;perm.id&quot;
                        cols=&quot;12&quot;
                        md=&quot;3&quot;
                    &gt;
                        &lt;VCheckbox
                            :label=&quot;perm.value&quot;
                            :value=&quot;perm.id&quot;
                            v-model=&quot;selectedPermissions&quot;
                        /&gt;
                    &lt;/VCol&gt;
                    &lt;VCheckbox
                        label=&quot;perm.value&quot;
                        value=&quot;perm.id&quot;
                    /&gt;

                    &lt;VCol
                        cols=&quot;12&quot;
                        class=&quot;d-flex gap-4&quot;
                    &gt;
                        &lt;VBtn type=&quot;submit&quot;&gt;
                            Ekle
                        &lt;/VBtn&gt;

                        &lt;VBtn
                            type=&quot;reset&quot;
                            color=&quot;warning&quot;
                            variant=&quot;tonal&quot;
                        &gt;
                            Sıfırla
                        &lt;/VBtn&gt;

                        &lt;VBtn
                            to=&quot;/roles&quot;
                            color=&quot;secondary&quot;
                            variant=&quot;tonal&quot;
                        &gt;
                            Geri D&#246;n
                        &lt;/VBtn&gt;
                    &lt;/VCol&gt;
                &lt;/VRow&gt;
            &lt;/VForm&gt;
        &lt;/VCardText&gt;
    &lt;/VCard&gt;

&lt;/template&gt;


&lt;route lang=&quot;yaml&quot;&gt;
meta:
    action: create
    subject: roles
&lt;/route&gt;

答案1

得分: 1

你正在覆盖代码中的一个响应式对象。ref()reactive() 的目的是使对 Vue 的常量操作立即可检测。相反,如果你声明了一个名为 permissions 的响应式数组,然后操控整个对象而不是响应式数组,它将无法正常工作。

不好的做法

let permissions = ref([])
permissions = data.permissions // 不要使用这个 - 现在你丢弃了 ref([]) 并重新声明 permissions 为非响应式数组

好的做法

const permissions = ref([])
permissions.value = data.permissions // 成功 - 只是修改了响应式对象的项目

更多信息: https://vuejs.org/api/reactivity-core.html#ref

英文:

You are overriding a reactive object in your code. The purpose of ref() and reactive() is to make constant manipulation immediately detectable by Vue. In contrast, if you declare a reactive array called permissions, but then manipulate the entire object instead of the reactive array, it won't work as intended.

BAD
<br> Overriding is not a good practice

let permissions = ref([])
permissions = data.permissions // don&#39;t use this - now you dropped ref([]) and redeclare permissions as not reactive array

GOOD
<br>Manipulating the reactive array is the right approach
<br>(and it's worth noting that the permissions variable can be declared as a const, since we don't want to change its value - it remains a reactive array throughout)

const permissions = ref([])
permissions.value = data.permissions // successfully - just modified items of reactive object

More information: https://vuejs.org/api/reactivity-core.html#ref

huangapple
  • 本文由 发表于 2023年4月17日 15:15:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76032533.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定