Exportieren VueJS gerenderte HTML mit Checkbox versagt Zustand

Question

Meine Komponentenvorlage enthält die folgenden Kontrollkästchen Code geprüft zu erhalten:

<div ref="htmlData"> 
    <input 
     type="checkbox" 
     class="mycb" 
     :id="uniqID" 
     :disabled="disabled" 
     v-model="cbvalue" 
    > 
</div> 

(Teile der Einfachheit halber entfernt).

Ich muss ein PDF aus dieser Vorlage (auf dem Server) erstellen. Das ist, was ich im Code tun:

methods : { 
    save() { 
     let saveData = { 
       'html': this.$refs.htmlData.innerHTML 
      }; 
     this.$http.post('/api/save',saveData); 
    } 
} 

Allerdings ist die gespeicherte HTML nicht Checkbox Zustand enthält, so dass es immer einen ungeprüften Checkbox speichert.

Hier ist eine leicht modifizierte jsfiddle.

Meine Frage ist: Wie kann ich den Checkbox-Status im gerenderten HTML erfassen?

ich versuchte, indem :checked="cbvalue" prop - kein Glück

Answer 1

Es sieht aus wie es keine Möglichkeit gibt, das checked Attribut eines Eingang zu binden; Vue macht alles durch die Immobilie. (Als Referenz ist die Eigenschaft der interne Status, das Attribut wird im HTML angezeigt.)

Damit das Attribut die Eigenschaft widerspiegelt, können Sie eine kleine Direktive hinzufügen.

var demo = new Vue({ 
 
    el: '#demo', 
 
    data:() => ({ 
 
    val: false 
 
    }), 
 
    methods: { 
 
    save() { 
 
     console.log(this.$refs.main.innerHTML); 
 
    } 
 
    }, 
 
    directives: { 
 
    explicitChecked: { 
 
     update(el) { 
 
     if (el.checked) { 
 
      el.setAttribute('checked', 'checked'); 
 
     } else { 
 
      el.removeAttribute('checked'); 
 
     } 
 
     } 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="demo"> 
 
    <button @click="save">save</button> 
 
    <div ref="main"> 
 
    <input type="checkbox" v-model="val" v-explicit-checked> 
 
    </div> 
 
</div>