Tyssen's questions

我在 Twig 模板中有这个：

<div
    class="multiSelect"
    id="{{ id }}"
    data-options="{{ options|json_encode }}"
    data-field="{{ handle }}"
>
    <div class="selectComponent"></div>
</div>

以及执行挂载的 js 文件：

multiSelects.forEach((el) => {
   const component = el.querySelector('.selectComponent');
   const options = el.dataset.options || '[]';
   const field = el.dataset.field || '';
   console.log('Field before mounting:', field);
   console.log('Items before mounting:', options);
   const multiSelect = createApp(MultiSelect);
   multiSelect.use(vuetify).mount(component, {
       props: {
           items: options,
           field: field,
       }
    });
});

它将正确的值输出到控制台。

页面上确实呈现了组件，但显示“无可用数据”。控制台中输出的是空字符串或数组。

这是该组件的代码。

<template>
  <v-select
    v-model="selectedvalue"
    :items="items"
    :name="field"
    item-text="title"
    item-value="id"
    label=""
    chips
    multiple
  ></v-select>
</template>

<script>
  export default {
    props: {
      items: {
        type: Array,
        default: () => []
      },
      field: {
        type: String,
        default: ''
      }
    },
    data() {
      console.log('After mounting items:', this.items);
      console.log('After mounting field:', this.field);
      return {
        selectedvalue: [],
      }
    }
  }
</script>

所以看起来组件中的 props 没有被正确拾取。这是为什么呢？

我有一个页面，它使用 Alpine.js 模板来添加和删除用于输入人员详细信息的表单字段集，并且还应该根据作为隐藏输入传递的人数来更新价格。

添加人员时它工作正常，再次删除人员时也一样。但是如果您在删除后尝试添加，则总数会不正确。

代码如下

<div x-data="add()" x-init="addNew">
    <div>
      <label for="price">Price:</label>
      <input type="text" name="price" id="price" value="100">
    </div>
    <template x-for="(field, index) in fields" :key="index">
      <div>
        <p>Person: <span x-text="`${index + 1}`"></span></p>
        <div>
          <label :for="`first_name_${index + 1}`">First name:</label>
          <input
            x-model="field.first_name"
            type="text"
            :name="`first_name_${index + 1}`"
            :id="`first_name_${index + 1}`"
          >
        </div>

        <div>
          <label :for="`last_name_${index + 1}`">Last name:</label>
          <input
            x-model="field.last_name"
            type="text"
            :name="`last_name_${index + 1}`"
            :id="`last_name_${index + 1}`"
          >      
        </div>

        <button type="button" @click="remove(index)">Remove</button>
      </div>

    </template>
    <button type="button" @click="addNew">Add</button>
</div>

<script>
  let priceInput = document.getElementById('price'),
      count = 1;

  function calcTotal(count) {
    if(count==1) priceInput.value = 200;
    if(count==2) priceInput.value = 375;
    if(count>2)  priceInput.value = 550;
  }

  function add() {
    return {
      fields: [],
      addNew() {
        this.fields.push({
          first_name: '',
          last_name: '',
        });
        calcTotal(count);
        count++;
      },
      remove(index) {
        this.fields.splice(index, 1);
        count = index;
        calcTotal(count);
      }
    }
  }
</script>

并且我创建了一个CodePen。

价格从 1 人 200 开始，2 人 375，3 人或以上最高 550。如果你用 CodePen 测试，你会发现如果你把 3 个人加起来然后再减回 1 个人，总数就会正确。

但是当您回到 1 并再次添加另一个时，总数不会更新，直到您添加第 3 个（即 375 而不是 550）。

我需要做什么来修复它？

另外，与此特定问题无关，当我创建 CodePen 并选择 Alpine 作为 js 依赖项时，它会自动添加 Alpine 3.1.4.0，但我的项目最初是用 2.xx 创建的，在 CodePen 中使用 3.x 时，不会渲染任何内容<template>。2 和 3 之间有什么不同导致这种情况？