Question

我有这样的数组来自API：

{"select1":"Select 1","select2":"Select 2","select3":"Select 3"}

我想将此数组呈现给option列表选择。

我试过这样但我不知道如何填写价值和文字。

Answer 1

根据文档，v-for允许您遍历对象的属性。

在这种情况下，您的对象是一个名为reasons的关联数组。这意味着，此数组包含键和值的列表。第一对（键：值）分别为"select1"和"Select 1"。

如何呈现这些对的值？

好吧，要提取第一项"Select 1"，我们需要声明一对别名，例如key和item，然后在这种情况下使用{{...}}进行插值渲染此代码示例中显示的item别名：

＆＃13;

var selector = new Vue({
  el: '#selector',
  data: {
    selected: '',
    reasons: {
      "select1": "Select 1",
      "select2": "Select 2",
      "select3": "Select 3",
      "select4": "Select 4",
      "select5": "Select 5",
      "select6": "Select 6",
      "select7": "Select 7"
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
  <select v-model="selected">
    <option v-for="(item, key) in reasons" :value="key">
      {{item}}
    </option>
  </select>
  <br>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

＆＃13;

更新

请注意，HTML代码select会为列表中的每个项目使用option标记。现在，此option代码在此结构中有一个value参数和一个text：

<select>
  <option value="select1">Select 1</option>
  ...
  <option value="select7">Select 7</option>
</select>

因此，我们需要将每个key数组原因分配给value标记的每个option参数，并将数组原因的value呈现为文本option标签。

<option v-for="(item, key) in reasons" :value="key">
  {{item}}
</option>

另外，不要忘记v-model指令，它在表单输入，textarea和select元素上创建双向数据绑定。这意味着，它会根据输入类型自动选择更新元素的正确方法。我们可以通过向selected实例创建中的data定义添加Vue并将v-model="selected"添加到select代码来实现此目的。

Answer 2

你应该查看documentation for list rendering an object。

package main

import (
    "fmt"
    "unicode/utf8"
)

// ISO88591ToString maps ISO-8859-1 (Latin-1) to string (UTF-8).
func ISO88591ToString(iso string) string {
    var utf []rune
    for i := 0; i < len(iso); i++ {
        r := iso[i]
        if utf == nil {
            if r < utf8.RuneSelf {
                continue
            }
            utf = make([]rune, len(iso))
            for j, r := range iso[:i] {
                utf[j] = rune(r)
            }
        }
        utf[i] = rune(r)
    }
    if utf == nil {
        return string(iso)
    }
    return string(utf)
}

func main() {
    l1 := "\x00\x00\t;IDATx\xDA\x010\t\xCF\xF6"
    fmt.Printf("%q\n", l1)
    s := ISO88591ToString(l1)
    fmt.Printf("%q\n", s)
}

Example

如何渲染数组以选择选项vue.js

2 个答案: