javascript - 跳过选定列表并添加直接href

Question

我尝试编辑加载本地 .json 文件的脚本。我希望当链接出现时，当我单击它时，它会重定向到 href 而不是选择该选项。

现在您可以单击列表项，然后将其选中并使用 x-bind href 打印所选项目。但是我尝试跳过最后一步，我只想在单击列表项时进行href。

对于获取 json 文件，脚本是

function data() {
        let optionsarray = [];
        fetch ("/codes.json")
          .then(response => response.json())
          .then(data => {
            let keys = Object.keys(data);
            for (let j = 0; j < Object.keys(data[keys[0]]).length; j++) {
                optionsarray.push({
                label: data[keys[0]][j],
                value: data[keys[1]][j]
              })
      
      
            }
            console.log(optionsarray)
            ;}
          );

          return {
            optionsVisible: false,
            search: "",
            selected: {
              label: "",
              value: ""
            },
            options: optionsarray,
            filteredOptions() {
                if(this.search) {
                  return this.options.filter((option) => {
                    return option.label.indexOf(this.search.toUpperCase()) == 0;
                  });
                }
                return this.options;
              }
          };

而html是

<div x-data="data()" class="subhead">
    
    <input type="hidden" :value="selected.value">
    <input type="text" x-model="search" placeholder="Zoek QR-codes..." @click="optionsVisible = !optionsVisible"></br>
    <div x-show="optionsVisible" style="display: none;">
        <ol>
        <template x-for="option in filteredOptions()">
            <li><a @click.prevent="selected = option; optionsVisible = false" x-text="option.label" style="display: block; text-decoration: underline;"></a></li>
        </template>
        </ol>
    </div>
    <p>Geselecteerde initialen (voornaam/achternaam) geboortedag-geboortemaand: <b><a x-bind:href="'/qrselect.php?n=geweldige_discrimerende_geldige_code&amp;qr=' + encodeURIComponent(selected.value)" href="/qrselect.php?n=geweldige_discrimerende_geldige_code&amp;qr="></br></br><span id="codelink" x-text="selected.label"></span></a></b>
    </p>      
</div>

我试图将 @click.prevent="selected = option; optionsVisible = false" 从最后几行的 a 跨度更改为 x-bind 和 href。但不幸的是，它没有转到正确的页面。

它把我重定向到

/qrselect.php?n=geweldige_discrimerende_geldige_code&qr=

所以最后json的值丢失了。

例如应该是：

/qrselect.php?n=geweldige_discrimerende_geldige_code&qr=HC1%3A6BFOXN%25TSMAHN-H6SKJPT.-7G2TZ971V80RBXEJW.TFJTXG41UQR%24TTSJ%20OKR-8CV4 XUA2PSGH.%2BH%24NI4L6HUC%25UG%2FYL%20WO Z7ON13%3ALHNGU R%2FW9%2FYFI%20FSOOPI0KXI% 24NIUZUK RIMI4UUIMI.J9WVHWVH%2BZE6%25PB%2BHHRI2UHD4TR%2FS09T.%2F0LWTKD3323EJ0E%209ZIEQKERQ8IY1I%24HH%25U8%209PS5

任何帮助将非常感激。

标签： javascripthtmljsonfetch