社区首页 >问答首页 >如何更新js函数中的x-data组件

问如何更新js函数中的x-data组件
EN

Stack Overflow用户

提问于 2022-01-17 03:17:07

回答 1查看 1.5K关注 0票数 0

Q1:

我正在尝试创建一个表单，它使用从API获取的初始值填充。每次用户编辑表单中的任何字段时，都应该向API发送POST请求，然后更新初始值。我的当前解决方案可以工作，但是当我在django模板中的for-循环中使用它时，生成的html文件的可读性并不理想，因为脚本重复了很多次。我认为将获取脚本提取到函数将使模板更易读，但我不知道如何更新包含用户在函数表单中给出的所有值的x-data组件的内容。

当前的解决方案如下(样式等不必要地清理)：

    <form action="/submitcars" method="POST" 
        x-data="{ dynamic_cars: [] }"
        x-init="dynamic_cars = await (await fetch('/dynamic_cars')).json()">
        {% csrf_token %}
        <div class="row-container">
            {% for row in rows %}
                {% for i in 0|range:3 %}
                  <div class="input_container car-{{i}}" x-show="open">
                    <div class="edited_icon" x-show="dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited === 'true'">
                      <i class="material-icons refresh" @click="dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited = 'false'">refresh</i>
                    </div>
                    <div class="edited_icon" x-show="dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited === 'false'"></div>
                    <input required
                    step="any"
                    id=id_form_car_{{i}}-{{row.row_id}}
                    name=form_car_{{i}}-{{row.row_id}}
                    type="{{row.html_type}}"
                    tabindex="{{i}}" 
                    x-model.lazy="dynamic_cars.cars[{{i}}].{{row.row_id}}.value"
                    @change= "dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited = 'true',
                    dynamic_cars = await (
                    await fetch('/dynamic_cars', {
                      method: 'POST', 
                      headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': document.head.querySelector('meta[name=csrf-token]').content  
                    },
                    body: JSON.stringify(dynamic_cars)
                    })).json()"></input>
                    <div class="unit" x-text="dynamic_cars.cars[{{i}}].{{row.row_id}}.unit"></div>
                  </div>
                {% endfor %}
            {% endfor %}
        </div>
        <div class="submit-button">
          <button type="submit" value="submit">Save</button>
        </div>
    </form>
        ...

编辑:添加了django循环和变量。row.row_id有一个属性名，它告诉我在CSS网格的每一行上显示的信息(make、model等)。所以这三辆车都有这些特性。Row.row_id与dynamic_cars API响应中的属性名匹配：

cars: [
        {
          {make: {value: "Toyota", unit: "", user_edited: "false"},
          {model: {value: "Camry", unit: "", user_edited: "false"},
          ...
          70+ more properties for each car
          ...
        },
        {...},
        {...}
      ]

与其在x-on:change之后进行整个后置提取，不如使用以下内容：

x-on:change="postCars(dynamic_cars)"

<script>
    async function postCars(dynamic_cars) {
      response = await fetch('/dynamic_cars', {
        method: 'POST', 
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': document.head.querySelector('meta[name=csrf-token]').content  
      },
      body: JSON.stringify(dynamic_cars)
      })
      .then(response => {
          if(response.ok) return response.json();
             })
    }
</script>

通过这样做，我可以看到脚本中的POST请求在其有效负载中具有dynamic_cars中的数据，并且响应是正确的，但是如果编辑输入，则dynamic_cars对象被设置为空，并且表单中的初始值消失。应该如何正确地做到这一点？

Q2:

我的另一个问题有点离题，但可能与javascript的基本知识有关，即浏览器开发工具中的控制台显示错误消息：

Alpine Expression Error: Cannot read properties of undefined (reading 'value')

Expression: "dynamic_cars.cars[1].make.value"

AND

Uncaught TypeError: Cannot read properties of undefined (reading '1')

这是否意味着我必须按照API返回的那样在x数据中定义/初始化dynamic_cars？如果API响应非常复杂，并且有大量的数据，甚至是未知的呢？编写x-data="{}“open将意味着数百行javascript，由于当前解决方案的工作方式不同，除了控制台错误之外，我不需要编写和维护这些代码。

javascript

alpine.js

企业复产复工专享

为企业提供海量产品优惠，助力中小企业数字化转型升级

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-18 04:33:34

在控制台中看到这些错误消息的原因是试图将表单字段绑定到不存在的对象。在Alpine.js环境中，只有一个空列表：x-data="{ dynamic_cars: [] }"。当Alpine.js最初尝试将输入字段绑定到相应的变量(例如dynamic_cars.cars[1].make.value )时，dynamic_cars甚至没有cars属性，实际上，它甚至不是一个对象，而是一个列表，因此也存在类型错误。

在错误的数据绑定周期之后，Alpine.js执行您在x-init中提供的获取后端并最终更新dynamic_cars变量的代码，因此现在它有了以前尝试绑定表单字段的属性/字段。令人惊讶的是，它仍然在某种程度上起作用，但IMHO它是相当不明确的行为，应该避免。

但是，由于您知道表单中的项/属性的数量，因此为它们创建正确的JS数据结构非常简单，因此Alpine.js可以将它们绑定到相应的表单字段。在获取后端之后，我们只需用获取的数据更新这个对象，Alpine.js就可以自动更新DOM。

<form action="/submitcars" method="POST" x-data="carsForm" @change="postCars">
  <div>
  {% for row in rows %}
      {% for i in 0|range:3 %}
        <div class="input_container car-{{i}}" x-show="open">
          <div class="edited_icon" x-show="dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited">
            <i class="material-icons refresh" @click="dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited = false">refresh</i>
          </div>
          <div class="edited_icon" x-show="dynamic_cars.cars[{{i}}].{{row.row_id}}.user_edited"></div>
          <input required
                step="any"
                id=id_form_car_{{i}}-{{row.row_id}}
                name=form_car_{{i}}-{{row.row_id}}
                type="{{row.html_type}}"
                tabindex="{{i}}"
                x-model.lazy="dynamic_cars.cars[{{i}}].{{row.row_id}}.value" />
          <div class="unit" x-text="dynamic_cars.cars[{{i}}].{{row.row_id}}.unit"></div>
        </div>
      {% endfor %}
  {% endfor %}
  </div>
  <div class="submit-button">
    <button type="submit" value="submit">Tallenna</button>
  </div>
</form>


<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('carsForm', () => ({
    dynamic_cars: {cars: {
    {% for i in 0|range:3 %}
    {{ i }}: {
      {% for row in rows %}
      {{ row.row_id }}: {value: '', user_edited: true, unit: ''},
      {% endfor %}
    },
    {% endfor %}
    }},

    init() {
      this.getCars()
    },

    getCars() {
      // ... fetch backend as usual

      // Sync new data with local this.dynamic_cars
      this.syncData(response.json())
    },

    syncData(new_data) {
      for (let i in new_data.cars) {
        let car = new_data.cars[i]
        for (let property_name in car) {
          for (let prop_attr of ['value', 'unit', 'user_edited']) {
            this.dynamic_cars.cars[i][property_name][prop_attr] = car[property_name][prop_attr]
          }
        }
      }
    },

    postCars() {
      // Post to the backend with payload: JSON.stringify(this.dynamic_cars)

      // Sync response data with local this.dynamic_cars
      this.syncData(response.json())
    }
  }))
})
</script>