使用复选框导出 VueJS 呈现的 HTML 无法保留选中状态答案

【问题标题】：Exporting VueJS-rendered HTML with checkbox fails to preserve checked state使用复选框导出 VueJS 呈现的 HTML 无法保留选中状态
【发布时间】：2018-03-10 12:41:44
【问题描述】：

我的组件模板包含以下复选框代码：

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

（为简单起见已删除部分）。

我需要使用这个模板创建一个 PDF（在服务器上）。这就是我在代码中所做的：

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

但是，保存的 HTML 不包含复选框状态，所以它总是保存一个未选中的复选框。

这里是稍作修改的jsfiddle。

我的问题是：如何在呈现的 HTML 中捕获复选框状态？

我尝试添加 :checked="cbvalue" 道具 - 没有运气

【问题讨论】：

我有 2 个问题要问您，首先为什么要将 HTML 推送到服务器？第二个 VueJS 状态是虚拟 DOM，jsfiddle.net/yMv7y/3533 我修改了一些你不会看到我的名字的输入类型文本。我的建议是将 JSON 数据推送到服务器，使用模板绑定你的数据。
1.我需要将 html 转换为 pdf 并且我不知道可以在客户端执行此操作的好的 JS 库。 2. 我想避免在服务器上进行任何其他解析，因为 HTML 模板可能会有所不同。有些使用复选框，有些不使用，我不想安装完整的服务器端渲染引擎来解决这个小问题。

标签： html checkbox vue.js vue-component

【解决方案1】：

看起来没有办法绑定输入的checked 属性； Vue 通过属性做所有事情。（作为参考，属性是内部状态，属性是在 HTML 中显示的内容。）

要让属性反映属性，可以添加一个小指令。

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>

【讨论】：