小编Reo*_*uan的帖子

我正在尝试学习 Alpine，并且正在测试嵌套的 x-data。我遇到了有关嵌套 x-data 的 GitHub 问题。他们提供了一个我想亲自尝试的解决方案。但是，当我尝试复制代码时，它没有打印任何内容。控制台中也没有错误。谁能指导我我做错了什么？

<div x-data="{foo: 'bar'}">
        <div x-data="{ }">
            <span x-text="foo"></span>
        </div>
</div>

我也尝试使用该$el属性，但它产生了相同的结果。

我有一个按钮，我希望它在单击时将组件数量加 1。但是，显示的值没有改变，但是当我在控制台中输入变量时，它会更新。

https://codepen.io/reonLOW/pen/ExyGyKb

    <div x-data="addItem()">
        <button @click="addItem()">+ 1</button>
        <br>
        <span x-text="amountOfComponents"></span>
        <br>
        <span x-text="itemPrice"></span>
    </div>

    var amountOfComponents = 0;
    var itemPrice = 0;

    const addItem = () => {

      amountOfComponents += 1;
      if (amountOfComponents <= 5) {
        itemPrice = 500 + (110 * amountOfComponents)
      } else if (amountOfComponents > 5, amountOfComponents <= 10) {
        itemPrice = 1000 + (105 * amountOfComponents)
      } else if (amountOfComponents > 10) {
        itemPrice = 1500 + (90 * amountOfComponents)
      }
      return {
        amountOfComponents,
        itemPrice …