Exportation VueJS-rendu HTML avec case à cocher ne parvient pas à préserver l'état vérifié

Question

Mon modèle de composant contient le code de case à cocher suivantes:

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

(pièces démontées pour la simplicité).

Je dois créer un fichier PDF à partir de ce modèle (sur le serveur). C'est ce que je fais dans le code:

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

Cependant, le HTML enregistré ne contient pas état de case à cocher, il enregistre toujours une case cochée.

Voici un jsfiddle légèrement modifié.

Ma question est: comment puis-je capturer l'état de la case à cocher dans le HTML rendu?

J'ai essayé d'ajouter :checked="cbvalue" prop - pas de chance

Answer 1

On dirait qu'il n'y a aucun moyen de lier l'attribut checked d'une entrée; Vue fait tout à travers la propriété. (Pour référence, la propriété est l'état interne, l'attribut est ce qui apparaît dans le code HTML.)

Pour que l'attribut reflète la propriété, vous pouvez ajouter une petite directive.

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>