G
Components serve to be reused, no use of mixin, which is reuse of component fragments.You have two problems there:Mixin inject values within components, but their values are not sharedO Mixin serves so that you do not need to repeat codes in distinct components that have some common function/data, but they are not shared with each other, if you change one, it does not change the other the Vue does not allow that1.
How you are using mixin within the component login that is behaving your component userform, you are just replicating the value of userform inside login (You can check it out But that's not the cause of your problem, so let's go to it...Call userform directly, makes you select the object userform component Login imported and not the component userform itself.I don't know for sure if that's the behavior, but by calling userform you are calling the object instantiated within components: { userform }, because think about me, and if you had 2 tags <userform>, which would you access? Reactivity is inherent in each component, independently.[tl;dr]
So he takes the value of the object userform, which is with the preset values, which will only change if you move the object, but still, without changing the value of the components, which are already other objects.Solution: https://vuejs.org/v2/api/#vm-refs One way to circumvent this problem is by using the references.
To use them, you must add property ref in the component and access it using
this.$refs.nome_da_ref.nome_do_dado.Ex(component myComponent.vue):<template>
<input v-model='x'>
</template>
<script>
export default {
data (){
return {
x: 10
}
}
}
<script>
Ex(Component test.vue):<template>
<my-component ref='meuComponent'>
</template>
<script>
import myComponent from './myComponent'
export default {
components: { myComponent }
methods: {
showData() {
console.log(this.$refs.x);
}
}
}
<script>
Once you change the input value of the <my-component> the reactivity works and the method showData() print it the entered value.ResultsSome changes need to be trade fairs in the component login:Remove the mixinAdd the referenceChange your method to use the reference instead of the objectCode:<template>
<section class="col-md-4 col-md-offset-4">
<userform ref='meuForm'></userform>
<button @click="sendLogin()">
Logar
</button>
</section>
</template>
<script>
import userform from './../../forms/userform.vue'
export default {
name: "login",
components: {userform},
methods: {
sendLogin() {
console.log( "Usuario " + this.$refs.meuForm.login )
console.log( "Senha " + this.$refs.meuForm.password )
}
}
}
</script>
That should work out.Recommendations and ConventionsIf you want to use the same data globally, for several components in the same view, I suggest you take a look at the https://github.com/vuejs/vuex .Use some prefix in your components, this may avoid headaches later (third-party components with the same name, components already existing in HTML, etc).Ex: <lvcsUserForm> or <lvcs-user-form>.Treat components as objects that are, using camel Case in their names during import, and repeat them in the files.This even helps you, not being necessary the attribute name in the component, and it may have its tag written in two ways, with PascalCase or kebab-case, but this is defined by the name used in import, how import MeuForm from './../../forms/userform' can be used as <MeuForm> or <meu-form>. *Obs: The same does not work for props, they should be named in camel Case and will always be written in kebab-case in the component, eg. <meu-form my-prop="10">.
