如何在面包屑Schema JSON生成器中为数组项添加从1开始的position序号

修改方案 #

你只需要做2处核心调整即可实现需求，用计算属性动态生成带position的结构化数据是最优方案，新增/删除问题时会自动更新索引值，不需要手动维护每个条目编号。

1. 修改Vue实例代码，新增计算属性

在原有Vue代码中增加computed配置项，动态为每个问题添加从1开始计数的position字段：

new Vue({
  el: "#app",
  data: {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: []
  },
  created: function() {
    this.mainEntity.push({
      "@type": "Question",
      name: "",
      acceptedAnswer: { "@type": "Answer", text: "" }
    });
  },
  // 新增计算属性开始
  computed: {
    schemaOutput() {
      return {
        "@context": this["@context"],
        "@type": this["@type"],
        mainEntity: this.mainEntity.map((item, idx) => ({
          ...item,
          position: idx + 1
        }))
      }
    }
  },
  // 新增计算属性结束
  methods: {
    AddField: function() {
      this.mainEntity.push({
        "@type": "Question",
        name: "",
        acceptedAnswer: { "@type": "Answer", text: "" }
      });
    },
    RemoveField(index) {
      this.mainEntity.splice(index, 1);
    }
  }
});

2. 修改HTML模板的输出逻辑

把原来输出$data的位置替换为上面定义的计算属性schemaOutput：

<textarea id="codeArea">
&lt;script type="application/ld+json"&gt;
{{schemaOutput | json }}
&lt;/script&gt;
</textarea>

可选补充：修正原代码的小问题

你提供的HTML代码里存在循环对象、绑定字段不匹配的问题，会导致表单和数据无法联动，同步修改即可：

<!-- 把原来的循环对象itemListElement改成实际存储数据的mainEntity -->
<div class="border" v-for="(field, index) in mainEntity">
  <button class="removeBtn" @click="RemoveField(index)">
    X
  </button>
  <textarea v-model="field.name" placeholder="问题内容"></textarea><br/>
  <!-- 把原来的v-model="field.item"改成对应回答的字段，placeholder也对应调整 -->
  <textarea v-model="field.acceptedAnswer.text" placeholder="回答内容"></textarea><br/>
</div>

修改完成后，生成的JSON中每个Question条目都会自动带从1开始递增的position值，新增、删除问题时索引会自动更新。

内容的提问来源于stack exchange，提问作者S Rahul