Vue.js Sollwert in berechneten Eigenschaften

Question

Ich habe 3 Eingänge wie folgt aus:

<input type="text" v-model="settings['apple']" /> 
<input type="text" v-model="settings['banana']" /> 
<input type="text" v-model="settings['orange']" /> 

Wenn ein Benutzer ein Wert für einen Eingang I den Wert erhalten möchten, die Benutzer-Wert zu verarbeiten eingegeben und neuen Wert zu aktualisieren. Ich bin mit berechneten Eigenschaften Wert verarbeiten:

data() { 
      return { 
       settings: {} 

      } 
     }, 

    computed: { 
      settings: { 
       set: function (newValue) { 
        var parts = newValue.match(/[\s\S]{1,2}/g) || []; 

      // Set new value ... 
       } 
      } 
     }, 

Das Problem ist, wie kann ich wissen, welche Benutzereingabe eingegeben und stellen Sie den neuen Wert?

Answer 1

Attribute, die in data und computed definiert sind, sollten sich gegenseitig ausschließen - die Definition des gleichen Attributs an beiden Stellen ist problematisch. Außerdem sollten Objekte unter Daten Standardwerte haben.

Also, stattdessen haben Sie Ihre berechnete Rückkehr ein anderes Objekt, das alle der transformierten Werte ist. Belassen Sie die Einstellungen, an die Ihre Eingaben gebunden sind, allein mit v-model. Sie können dann separat an das berechnete Objekt binden und es Ihrem Benutzer anzeigen, wenn Sie möchten.

data() { 
     return { 
      settings: { 
       "apple": "", 
       "banana": "", 
       "orange": "" 
      } 
     } 
    }, 

computed: { 
     transformed_settings: function() { 
      /* create and return an object with transformed apple, banana, orange */ 
     } 
    },