小编Bou*_*him的帖子

我正在为我的 SpringBoot 应用程序创建前端。要发送 Get 请求，我需要从程序中的输入获取值，但没有成功。

选择后我尝试使用任何.value, valueOf(),方法之王.toString()document.getElementById("name")，但它们似乎都不起作用。

// 元素

<form class="pt-3">\n   <div class="form-group">\n      <label for ="name">Person ID</label>\n      <input\n         type="text"\n         id="name"\n         class="form-control is"\n         :class="{\'is-invalid\': $v.name.$error} "\n         @input="$v.name.$touch()"\n         v-model="name"\n         placeholder="123456"\n         value=""\n      >\n      <div class="invalid-feedback" v-if="!$v.name.minLength">ID must be at least 5 characters</div>\n      <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">\xd0\x9d\xd0\xb0\xd0\xb9\xd1\x82\xd0\xb8</button>\n   </div>  \n</form>\n

// 功能

AddPerson: function () {\n    var nperson = document.getElementById("name").valueOf().value.name;\n    console.log(nperson);\n}\n

我需要将用户输入的文本输出到页面上的名称行并将其发布到console.log().

/// 添加

data() {\n  return …

我正在构建一个具有文件输入字段并通过以下函数呈现的组件VueJs：

export default {
    name: 'nits-file-input',
    props: {
        label: String,
    },
    render (createElement) {
        return createElement('div', { class: 'form-group m-form__group'}, [
            createElement('label', this.label),
            createElement('div'),
            createElement('div', { class: 'custom-file'},[
                createElement('input', {
                    class: 'custom-file-input',
                    attrs: { type: 'file' },
                    domProps: {
                        value: self.value
                    },
                    on: {
                        input: (event) => {
                            var reader = new FileReader()
                            reader.readAsDataURL(event.target.value)
                            reader.onload = function () {
                                console.log(reader.result);
                            };
                            this.$emit('input', event.target.value)
                        }
                    }
                }),
                createElement('label', { class: 'custom-file-label'}, 'Choose File')
            ])
        ])
    }
}

虽然在 v-model …

我正在玩vue js和第三方API。我已经成功获取了json数据并将其呈现在html中，但是我在图像上苦苦挣扎。json文件中缺少某些图像，因此我将其本地存储在笔记本电脑中。

我试图在我的html中使用v-if设置空图像源，但没有运气。（请参阅我的html文件中的注释）

另外，我尝试为每个类分配一个类img，然后尝试img使用jquery 设置源，$("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png");但也没有运气。

我的错在哪里 也许我的方法是完全错误的，因为我是编码方面的新手，任何建议将不胜感激。先感谢您

var app = new Vue({
  el: "#app",
  data: {

    beers: [],
    decrArray: [], //array with img links
    cleanedArray: [], //without undefined
    path: 0,
    images: [missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
    "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
	"missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png"],
  created: function() {
    this.getData();
  },

  methods: {
    getData: function() {
      var fetchConfig =
        fetch("http://api.brewerydb.com/v2/beers?key=6a3ac324d48edac474417bab5926b70b&format=json", {
          method: "GET", …

我正在使用 Vuetify 组件v-checkbox。

我想为复选框的真/假状态指定特定值。

查看文档，我似乎可以使用true-value&false-value属性来做到这一点。

<v-checkbox
    v-else-if="input.type == 'checkbox'"
    false-value="0"
    true-value="1"
    input-value="input.val"
    :error-messages="form.errors[field]"
>
    <template #label>@{{ input.hint }}</template>
</v-checkbox>

但是，使用上面的示例不会提交1选中复选框时的值。0无论复选框是否被选中，该复选框都会提交。

我需要做什么才能正确设置true-valueto 1？

我开始使用 Vuetify 2.x。

我有一个表格，一些列应该用 html 显示。

所以我使用了下面的代码：

        <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
          <template v-slot:items="props">
            <tr>
              <td class="text-sm-center">{{ props.item.name}}</td>
              <td><span v-html="props.item.desc"></span></td>
            </tr>
          </template>
        </v-data-table>

但是从 Vuetify 2.0 开始，表已经改变了。

        <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
        </v-data-table>

不再使用“模板”。所以我不知道如何在某些列中应用“v-html”。

使用Options API，我像这样验证了我的表单：

模板：

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent>
...

脚本：

methods: {
  validate() {
    this.$refs.form.validate();
    ...
  }
}

现在，使用 new Composition API，我如何调用validate()表单？

请看这两个代码片段，它们都输出相同的结果：

<template>
  <input type="file" @input="input" />
</template>

<script>
export default {
  methods: {
    input(event) {
      console.log(event.target.files);
    },
  },
};
</script>

<template>
  <input type="file" @change="change" />
</template>

<script>
export default {
  methods: {
    change(event) {
      console.log(event.target.files);
    },
  },
};
</script>

element@input和@changeevent之间有什么区别<input type="file" />吗？

基本上，标题已经说明了一切：In Vue.js 3, Why do I have to use the valueproperty on ref, but not onreactive？

我知道这ref是针对简单值，例如布尔值、数字、\xe2\x80\xa6，并且reactive针对复杂值，例如对象和数组。我不明白的是：

\n
• 为什么我需要指定value何时访问 aref的值，但如果使用 则不需要指定reactive？这不是 API 中的不一致吗？或者是否存在实际的技术原因？？
\n
• 为什么我不能同时使用其中之一？换句话说：是否有技术原因导致没有一个函数根据给定值的类型决定如何在内部包装它？
\n