Question

我的PHP代码，我确实有一些变量假设

$checked = true;

我正在写这样的东西

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

现在在我的vue js文件中如何使用此检查数据填充我的模型

subscribed的值为true或false。 （我不打算直接通过PHP代码为js赋值，我需要将其设置在内部/输入中，而不是在其他任何地方输入）

请检查代码段。

＆＃13;

<!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>

＆＃13;

你现在可以看到我必须在数据subscribed中添加模型变量但是我还需要提供它的值，如果我提供它的值，那么它将覆盖它的实际值（所以为了使它工作我设置它最初从DOM元素值{self {sub.checked sub是由dom.getelembyid提取的dom元素...}但是我不喜欢这样的方式因为会有更多元素（文本|选择|无线电）等。）

有没有任何方法（优雅的方式）subscribed将自动从输入中自动选择其值。

Answer 1

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-case写入camelCase转换指令。

这是JSFiddle中更新的代码段：https://jsfiddle.net/evnctym1/

Answer 2

这不符合Vue的精神，因为您应该在可行的情况下在模板之外添加逻辑，但是这里有一个聪明的解决方法，在大多数情况下都可以使用

<input 
  v-model="foobar"
  :run="!foobar ? foobar = 1 : true"
/>

:run不是特殊属性，它是完全任意的。我用它来定义我正在进行v建模的值。

在我的情况下，这很有用，因为我需要对尚不存在索引的数组的索引进行v-model。模板正在创建对其进行v模型建模的索引。我确实不建议您采用上述解决方法，并建议您进行全面测试（如果您将其用于潜在的副作用），但这将使您可以在模板中内联初始化一个值。

Answer 3

以下是一些在将后端数据与Vue绑定时可能有用的概念。

0。建立一个REST API并使用它

首选方法，但有时这是不可能的。例如，如果您不能完全控制后端代码。

1。您可以分配全局变量

要使用PHP / HTML在Vue上下文中获取数据，

<script>
var myDataFromPhp = {
  stringExample: '<?php echo "Hello World!"; ?>',
  objectExample: JSON.parse('<?php echo json_encode(["Hello again" => "Greetings from Mars!"]); ?>'),
}
</script>

在Vue中：

data: {
  someString: window.myDataFromPhp && window.myDataFromPhp.stringExample? window.myDataFromPhp.stringExample : '',
  someObject: window.myDataFromPhp && window.myDataFromPhp.objectExample? window.myDataFromPhp.objectExample : {},
},

也许只是将所有数据填充到PHP端的一个对象中以使其更漂亮。您还可以使用变量命名来表示它是只读的，并且是静态的：var _OBJECT_EXAMPLE = ...

2。如果您不想在`<script>`标签内公开全局变量

将表单数据绑定到Vue时，在特定状态下初始化Vue应用时，以下对我有用。如果您只需要绑定一点东西，这将很有用。

在Vue应用的范围内：

<input name="someInputData" type="hidden" :value="someInputData = 'Heya!'">

然后在Vue应用中声明数据：

data: {
  someInputData: undefined, // NOTE: This one is initialised in template element input[name="someInputData"]
},

我不确定这是否有异步副作用。谨慎使用并进行测试。

3。使用香草JS：

在HTML中：

data: {
  someInputData: document.getElementById('my-hidden-input')? document.getElementById('my-hidden-input').value : undefined, 
}

只需确保只有唯一的DOM元素，否则您的数据将全部出错...

Answer 4

指令v-model忽略输入的初始状态。因此，您无法在任何表单元素上设置value，checked或selected。作为真实的来源总是处理Vue实例数据。因此，您应该在特定组件的data选项内的JavaScript端声明初始值。

Answer 5

基于@craig_h答案的改进

// Usage <input v-model="my_input" v-init="'Hi!'" />
// The property my_input will be initialized with the value of v-init, here Hi!
Vue.directive('init', {
  bind (el, binding, vnode) {
    let vModel = vnode.data.directives.find(d => d.rawName == "v-model")
    if (vModel) {
      vnode.context[vModel.expression] = binding.value
    }
  }
})

Vue.new({
  data: {
     input: undefined,
     other: "See"
  }
}

<input v-model="my_input" v-init="'Hi!'" />

<input v-model="my_input" v-init="'other + ' you...'" />

将初始值设置为vue.js模型，该模型可直接在HTML中使用

5 个答案:

0。建立一个REST API并使用它

1。您可以分配全局变量

2。如果您不想在`<script>`标签内公开全局变量

3。使用香草JS：

将初始值设置为vue.js模型，该模型可直接在HTML中使用

5 个答案:

0。建立一个REST API并使用它

1。您可以分配全局变量

2。如果您不想在<script>标签内公开全局变量

3。使用香草JS：

2。如果您不想在`<script>`标签内公开全局变量