Question

我正在使用 vue.js 并尝试重新创建http://csharp.net-informations.com/xml/how-to-read-xml.htm示例。他们使用以下代码：

HTML

var example1 = new Vue({
  el: '#example-1',
    data: {
    counter: 0
  }
})

JS

<div id="example-1">
  <counterButton></counterButton>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

我想做同样的事情，但作为我经常做的事情，我想创建一个组件：

HTML

Vue.component('counterButton', {
  template: '<button v-on:click="counter += 1">Add 1</button>'
})

var example1 = new Vue({
  el: '#example-1',
    data: {
    counter: 0
  }
})

JS

data

这似乎不起作用，而我收到以下警告：

[Vue警告]：未定义属性或方法“nextPage” 实例，但在渲染期间引用。确保声明被动数据选项中的数据属性。

由于我不熟悉javascript，我根本无法理解错误。我想我必须以某种方式将connect-mongo值“链接”到我的组件？

Answer 1

您的组件应该如下调用。

$this->db->select('name');
$this->db->from('alias');
$this->db->like('name', $username,'after');   // Produces: WHERE `name` LIKE 'username%' ESCAPE '!'
$this->db->limit('5');
$query = $this->db->get();

这将修复警告并显示按钮。但是，您的计数器不会改变（至少不是您期望它的方式）。

<强>原因

这是因为现在一个按钮是一个独立的组件，它不知道父组件的计数器。

我建议您查看VueJs关于组件的官方文档，他们有一个很好的counter示例。

旁注：

如果您希望在多个组件中重复使用一个按钮以仅增加一个计数器，则必须实施events或使用Vuex。然而，这些是一些高级主题，您应首先介绍基础知识。

使用vue.js组件来计算数据值

1 个答案: