Vue.js - 从模板中访问数据属性而不使用 vue 文件中的道具 [英] Vue.js - access data property from within template without using props in vue file

问题描述

在我的 Laravel + Vue.js SPA(单页应用程序)中，我使用的是 BootstrapVue和 VeeValidate.

在 EditProfile.vue 文件中，我想从模板中的属性 default_country_code 访问数据属性，即 default_country_code.>

我可以通过使用props来实现它，即:在Vue根实例中有一个数据属性，然后在中的props的帮助下在模板中使用它EditProfile.vue 文件.

但我想在模板中使用它而不使用任何props.因为如果我使用 props ，我需要在不同页面的模板部分中使用的所有 props 都必须在 Vue root instance 中定义.当那些将用作 props 的数据属性来自数据库时，我必须在相应的 Laravel 控制器方法中的 DB 中进行多个查询，并在 Vue 根实例中使用它们.而且这种方法对我来说似乎不是任何松散耦合的架构.

在 EditProfile.vue 页面中，我有:

<模板><ValidationProvider vid="name";规则=必需"名称=名称"v-slot={有效，错误}"><b-形式-组标签=名称:"label-for="exampleInput1";><b-表单输入v-model=名称"default-country-code="default_country_code";:state="错误[0] ?假:(有效?真:空)"占位符=输入名称"></b-表单输入<b-form-invalid-feedback id="inputLiveFeedback">{{errors[0] }}</b-form-invalid-feedback></b-form-group></ValidationProvider></模板>导出默认{名称:编辑配置文件"，道具: {},数据:() =>({姓名:先生.XYZ",default_country_code:FR"；})};

如何在不使用任何 props 的情况下在模板属性中使用 default_country_code 就像我之前所说的那样借助 Vue 根实例?

解决方案

假设您尝试从子组件访问值，您可以访问 Vue 的状态.例如 let someVar = $parent.default_country_code.

也就是说，使用 props 或类似 vuex 之类的东西来存储全局状态是更好的做法.

In my Laravel + Vue.js SPA (Single Page Application), I am using BootstrapVue and VeeValidate.

In EditProfile.vue file, I want to access the data property namely default_country_code from an attribute in the template namely default_country_code.

I can achieve it by using props i.e: having a data attribute in Vue root instance and then using it in the template with the help of props in EditProfile.vue file.

But I want to use it in the template without using any props. Because if I use props, all the props that I need to use in template sections in different pages have to be defined in Vue root instance . And when those data attributes that will be used as props come from database, I have to make multiple queries in DB in the corresponding Laravel controller method and use them in Vue root instance. And this approach does not seem to be any loosely coupled architecture to me.

In EditProfile.vue page, I have :

    <template>     
             <ValidationProvider vid="name" rules="required" name="name" v-slot="{ valid, errors }">
                           
                  <b-form-group
                                    label="Name:"
                                    label-for="exampleInput1"
        
                            >


                      <b-form-input

                                v-model="name"
                                default-country-code="default_country_code"
                                :state="errors[0] ? false : (valid ? true : null)" 
                                placeholder="Enter Name"

                       ></b-form-input
        
                                <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
    
                  </b-form-group>

             </ValidationProvider>
        
</template>         
                        
        
        export default {
                name: "EditProfile",
                props: {
        
                },
               data: () => ({
                    name:"Mr. XYZ",
                    default_country_code:"FR"
        
                })
        
        };

How can I use default_country_code in template attribute without using any props by taking help of the Vue root instance as I said before ?

解决方案

Assuming you're trying to access the value from a child component, you can access Vue's state. For example let someVar = $parent.default_country_code.

That said, using props or something like vuex to store global state, would be better practice.

这篇关于Vue.js - 从模板中访问数据属性而不使用 vue 文件中的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！