我有PHP代码,我确实有一些变量

$checked = true;

我正在写这样的东西

<input v-model="subscribed" type="checkbox" <?= ($checked ? 'checked' : '') ?>  />

现在在我的vue js文件中,我如何用这些判断过的数据填充我的模型

subscribed有正确或错误的价值.(I don't intend to assign value to js directly by PHP code I need to set it inside/in input it self not anywhere else)

请判断代码片段.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
     <label>
       <input id='sub' v-model="subscribed" @click="printState" type="checkbox" checked />
       Subscription
     </label>
  </div>
  <script>  
   new Vue({
      el: '#app',
      data: function() {
        return {
          subscribed: false,
          // subscribed: sub.checked
          // ^ this works but i dont want to add everytime id and get its value manually
        }
      },
      created: function() {
        var self = this;
        setTimeout(function() {
          console.log('Checkbox is having its initial value true/checked');
          console.log(self.subscribed);
        }, 1000)
      },
      methods: {
        printState: function(){
           console.log(this.subscribed)
        }
      }
    });
  </script>
</body>

您现在可以看到I have to add model variable in data 100 but then I also need to provide its value and if I provide its value then it will override its actual value(为了让它工作,我正在设置它最初从DOM元素中的值,它本身{sub.checked sub是DOM.getelembyid获取的DOM元素…}但我不喜欢这样,因为会有更多的元素(文本| Select |广播)等等)

那么,有没有什么方法(优雅的方法)让subscribed自动从输入中 Select 它的值呢.

推荐答案

Vue实际上并不是从HTML初始化的,但是,一种方法是使用指令来初始化init的值.这与Angular的ng-init大致相同:

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

这实质上是采用绑定参数,即冒号后面的名称(请参见下文),并将其设置为Vue实例上的给定值,然后可以将其用作:

<input v-model="subscribed" type="checkbox" v-init:subscribed="<?=($checked) ? 'true' : 'false'?>"  />

不过有几点需要注意的是,首先你仍然需要预先声明你的数据属性,它不会动态地注入它们,其次所有的东西都会被计算为JavaScript,所以如果你想用一个字符串初始化,它需要用单引号括起来,最后它不会理解camelCase,因此,如果要设置camelCase个数据属性,需要在指令中写入kebab-casecamelCase的转换.

以下是您在JSFIDLE:https://jsfiddle.net/evnctym1/中更新的代码片段

Vue.js相关问答推荐

vuejs中如何获取数组总长度

当用户在嵌套路由中时激活链接

使用 nuxt.js 组件自动导入对性能不利吗?

Vuejs中的条件a href

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

错误:vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

JavaScript/VueJS:判断数组是否包含具有特定值元素的对象

为什么 vue 文档说 refs 不是响应式的,而实际上它们是响应式的

在Vue.js中从父组件执行子方法

vue 3 使用 Vuex 和路由的服务器端渲染

Vuex 存储数据总是驻留在内存中?

使用 refs 聚焦元素目标

Vuejs css 范围性能

Vue Chart.js - 条形图上的简单点/线

错误:找不到模块'@vue/babel-preset-app'

v-for 中的计算(Computed)/动态(Dynamic) v-model 名称

Vuetify 离线文档

在 Vuejs 中全局导入 Axios 方法

如何在 vue3 中的setup方法中发出事件?