J'ai lu des réponses telles que ceci mais impossible de faire compiler mon modèle.
J'ai besoin de concaténer une chaîne avec une variable dans v-model pour lier à un tableau à l'intérieur d'un objet:
Syntax Error: SyntaxError: Unexpected token (1:1161)
3 Réponses :
Vous ne pouvez pas faire ça.
v-model est utilisé pour la liaison de données bidirectionnelle et est un sucre syntaxique pour : checked = "myField" + @ change = "evt = > myField = evt.target.checked dans le cas d'une case à cocher.
Comme vous pouvez le voir, myField doit être une expression de gauche valide dans JS, c'est d'ailleurs une des règles précisées par Vue pour avoir un v-model :
La directive n'a pas la valeur d'attribut qui est valide comme LHS. Par exemple.
Et c'est exactement pourquoi votre modèle ne se compile pas. Vue peut comprendre comment lier les données d'une manière car il peut attribuer 'vérifié.' + Nom à une variable, mais il ne peut pas affecter une variable à 'vérifié.' + Nom - ce n'est pas une expression de signe de gauche valide.
Mais lorsque je configure manuellement le modèle v pour faire ce que je veux, cela fonctionne bien. J'essaye juste de concaténer une chaîne et un nom de var.
C'est exactement ce que je dis. Vue peut concaténer facilement. Il ne peut pas déconcentrer. Une méthode de liaison de données bidirectionnelle requise n'est pas possible.
Je ne suis pas sûr de comprendre ce que vous dites. v-model = "checked.myname" fonctionne, alors pourquoi ne pouvons-nous pas simplement concater cette valeur à partir d'une var?
nous pouvons concater nous ne pouvons pas faire l'inverse. Par liaison bidirectionnelle à 'checked.'myname , Vue ne pourra pas savoir quelle variable mettre à jour lorsque la valeur d'entrée est mise à jour car la référence d'objet est perdue lors de la concaténation. Ainsi l'erreur.
La référence d'objet ne sera pas perdue lors de la concaténation, la concaténation crée la référence. Par exemple, la concaténation produit v-model = "checked.myname" qui fait référence à un élément dans les données.
Excuses, je me suis trompé sur la référence de l'objet perdant. J'ai répondu trop vite. J'ai modifié ma réponse de manière à inclure une mise à jour avec une meilleure explication et un lien vers la documentation expliquant pourquoi votre modèle ne se compilera pas. Est-ce mieux maintenant?
Le v-model = "name" vous aide à faire deux choses.
:value="name" @ input = "name = $ événement Cependant, dans votre cas, vous faites v-model = "'checked.' + name" , ce qui signifie:
: value = "'checked.' + name" // ce qui est parfaitement bien @input = "'vérifié.' + name = $ event" // cela provoquerait une erreur. La documentation peut être trouvée ici .
Voici une de mes solutions: JsFiddle
<input type="checkbox" v-model="checkedName">
Cela ne fonctionne pas. Erreur de compilation SyntaxError: attribution à rvalue
Merci d'avoir mis à jour votre réponse, mais je crains que la liaison ne fonctionne toujours pas. return vérifié. $ {this.name} ; `comment connaît-il le nom si rien n'est passé au setter set: function (newValue) de v- model = "checkedName" ?
set: est déclenché lorsque vous faites checkedName = $ event , le newValue est $ event . Vérifiez le jsfiddle
L'exemple n'est pas correct car il n'est pas dans une boucle ou même une case à cocher.
J'ai mis à jour le violon , mais je ne suis pas sûr de ce que vous essayez d'accomplir. Quelle valeur souhaitez-vous stocker dans les noms ?
Pourquoi mettez-vous une chaîne en valeur d'une case à cocher? Ne devrait-il pas être booléen ? Avez-vous un objet appelé coché et vous souhaitez accéder à son attribut en utilisant nom ? si names [0] = 'asd' , vous voulez accéder à checked.asd ?
Juste au cas où une perspective légèrement différente aiderait: Que vous l'utilisiez dans une directive v-model ou : data-test
<input type="checkbox" v-model="checked[name]">
donne une chaîne. Bien que ce ne soit probablement pas ce que l'on voudrait normalement faire, cela est syntaxiquement légal pour un v-bind arbitraire (par exemple : data-test ). Ce n'est cependant pas syntaxiquement légal pour un v-model . Comme d'autres l'ont souligné, v-model tente d'attribuer une valeur aux événements "change" . Ce serait équivalent, par exemple, à
checked.foo = true;
quand ce que je pense que vous voulez est
'checked.foo' = true;
C'est difficile à dire bien sûr sans voir plus de votre code, mais il se peut que
'checked.'+name
soit suffisant pour vous.
pouvez-vous partager l'erreur de compilation qui apparaît?