在全局应用程序 vue3.js 中获取数据后，如果没有 twig symfony render 中的组件，数据不会更新

Question

我需要在单个页面上使用 vue3，并且无法在没有组件的情况下使用 vue3 更新 useNoms 的值...

没有组件的App.js需要更清晰：

const app = Vue.createApp({
    data(){
        return {
            grille:"",
            useNoms: "",
            errored: false
            }
    },
    mounted(){
        this.fetchData();
        this.useNomsFct();
    },
    methods: {
        fetchData(){
            axios.get("http://myAPI/url")
            .then(function (response) {
                // handle success
                this.grille=response.data;
            })
            .catch(function (error) {
                // handle error
                console.log(error);
                this.errored = true;
            //})
            //.finally(function () {
            // always executed
            });
            return this.grille;
        },
        useNomsFct(){
            if(this.grille.useNoms==="non"){
                this.useNoms="non";
                console.log('non' + this.grille);
            } else {
                this.useNoms="oui";
                console.log('oui'+this.grille);
            }
            return this.useNoms;
        },
    },  
});
app.mount('#app');

为什么返回值 this.useNoms 没有定义，条件 if(this.grille.useNoms==="non") 不匹配，因为属性 this.grille 没有更新，我该怎么办？

HTML 中直接包含 CDN：

<script nonce="{{ csp_nonce() }}" src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script nonce="{{ csp_nonce() }}" src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <div id="app">
    <table>
    <tbody>
    <tr>
    <td>
    <p><label for="useNoms">Oui</label>&nbsp;&nbsp;
    <input type="radio" name="useNoms" value="oui" v-model="useNoms"/></p>
    <p>
    <label for="useNoms">Non</label>&nbsp;&nbsp;
    <input type="radio" name="useNoms" value="non" v-model="useNoms"/></p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>

通过 Axios 从 API 获取数据：

useEntraineurs: "non"
useJockeys: "oui"
useNoms: "non"
useProprietaires: "non"

我正在尝试根据值“oui”或“non”显示一个单选按钮

Answer 1

我添加了一个 async function(){await...} 并消除了第二个函数 useNomsFct()，我不知道为什么即使在这个函数中添加了await，数据也没有刷新... 这给出了脚本：

const app = Vue.createApp({
    data(){
        return {
            grille:"",
            useNoms: "",
            errored: false
            }
    },
    mounted(){
        this.fetchData()
    },
    methods: {
        async fetchData(){
            await axios.get("http://pmualgo/grilleADisplay")
            .then(function (response) {
                // handle success
                this.grille = response.data;
                //this.grille = JSON.stringify(response.data);
                if(this.grille.useNoms==="non"){
                    this.useNoms="non";
                    console.log(this.useNoms);
                } else {
                    this.useNoms="oui";
                    console.log(this.useNoms);
                }
                console.log(this.grille);
            })
            .catch(function (error) {
                // handle error
                console.log(error);
                this.errored = true;
                this.grille='{"error":"error API"}';
            //})
            //.finally(function () {
            // always executed
            });
            return this.grille, this.useNoms;
        },
    },  
});
app.mount('#app');

我将逻辑直接放在 fetchData() 脚本中，控制台输出显示刷新的值，但是关于返回值，我的单选按钮仍然没有被选中......