, je pense que le problème est ici:

<template id="newtemp" :name ="{{user.name}}">

Lorsque vous préfixez l'accessoire avec : vous indiquez à Vue qu'il s'agit d'une variable, pas d'une chaîne. Donc, vous n'avez pas besoin du {{}} autour de user.name. Essayez:

<template id="newtemp" :name ="user.name">

Modifier - - - - -

Ce qui précède est vrai, mais le plus gros problème ici est que lorsque vous modifiez l'URL et accédez à une nouvelle route, le composant d'origine disparaît. Pour que le deuxième composant modifie les données parentes, le deuxième composant doit être un composant enfant du le premier, ou juste une partie du même composant.

La meilleure façon d'envoyer des données d'un composant parent à un enfant est d'utiliser props .

Transmettre des données du parent à l'enfant via props

• déclare props (Tableau ou objet ) dans l'enfant
• Transmettre à l'enfant via <child :name="variableOnParent">

Voir la démo ci-dessous:

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

J'ai trouvé un moyen de transmettre les données parentes à la portée du composant dans Vue, je pense que c'est un peu un hack mais peut-être que cela vous aidera.

1) Les données de référence dans L'Instance Vue en tant qu'objet externe (data : dataObj)

2) Ensuite, dans la fonction de retour de données dans le composant enfant, retournez simplement parentScope = dataObj et voila. Maintenant, vous ne pouvez pas faire des choses comme {{ parentScope.prop }} et fonctionnera comme un charme.

Bonne Chance!

Une variable js globale (objet) peut être utilisée pour passer des données entre les composants. Exemple: transmission de données depuis Ammlogin.vue sur Options.vue. Dans Ammlogin.vue rspData est défini sur la réponse du serveur. Dans Les Options.vue la réponse du serveur est disponible via rspData.

Index.html:

<script>
    var rspData; // global - transfer data between components
</script>

Ammlogin.vue:

....    
export default {
data: function() {return vueData}, 
methods: {
    login: function(event){
        event.preventDefault(); // otherwise the page is submitted...
        vueData.errortxt = "";
        axios.post('http://vueamm...../actions.php', { action: this.$data.action, user: this.$data.user, password: this.$data.password})
            .then(function (response) {
                vueData.user = '';
                vueData.password = '';
                // activate v-link via JS click...
                // JSON.parse is not needed because it is already an object
                if (response.data.result === "ok") {
                    rspData = response.data; // set global rspData
                    document.getElementById("loginid").click();
                } else {
                    vueData.errortxt = "Felaktig avändare eller lösenord!"
                }
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                vueData.errortxt = error.message;
            });
    },
....

Options.vue:

<template>
<main-layout>
  <p>Alternativ</p>
  <p>Resultat: {{rspData.result}}</p>
  <p>Meddelande: {{rspData.data}}</p>
  <v-link href='/'>Logga ut</v-link>
</main-layout>
</template>
<script>
 import MainLayout from '../layouts/Main.vue'
 import VLink from '../components/VLink.vue'
 var optData = { rspData: rspData}; // rspData is global
 export default {
   data: function() {return optData},
   components: {
     MainLayout,
     VLink
   }
 }
</script>