小编Bou*_*him的帖子

Vue 实例可以允许您创建嵌套视图模型。例如，考虑以下情况

new Vue({
  el: '#app',
  data: {
    form: {
      firstName: "Joe",
      lastName: "Bloggs"
    }
  },
  computed: {
    name: function () {
        return this.form.firstName + ' ' + this.form.lastName;
    }
  }
});

正如您所看到的，有一个嵌套的表单数据对象：form.firstName 和form.lastName。我可以使用以下命令将此视图模型绑定到 HTML：

<div id="app">
  <form>
    <label>
      First:
      <input type="text" v-model="form.firstName">
    </label>
    <label>
      Last:
      <input type="text" v-model="form.lastName">
    </label>
  </form>
  <div>
    You are: {{name}}
  </div>
</div>

这是此 Vue.js 示例的 JS Fiddle

现在，我的问题是：是否有一种简单的方法（例如指令）来创建嵌套绑定范围，使我可以在没有前面的“表单”的情况下寻址firstName和lastName？

Knockout.js 具有with 绑定，允许您显式指定与视图模型相关的绑定范围。这是一个 JS Fiddle，显示 Knockout.js 使用 with 绑定

Vue 中是否有一个类似于 Knockout 的简单绑定绑定 …

我有一个 vue 应用程序。我用来this.data访问它的数据变量和方法。

在某种方法中，我必须使用 img.onload 来获取图像的宽度。但是现在有 2 个“ this ”，vue js 方法和变量现在不起作用。我需要一个替代解决方案，以便两者都能工作。

vueMethod(url) {
 var img = new Image();
 img.onload = function() {
  this.size = {this.width,this.height}  //size is a vue variable
 }
 img.src = url;
}

我有一个简单的 Vue 过滤器，它将数组的长度限制为 n 个元素。像这样使用它工作正常：

{{ array | limitArray(2) }}

现在我想在v-for循环中使用它，如下所示：

<li v-for="item in items | limitArray(3)">...</li>

但这会引发错误。如何在 a 中使用过滤器v-for？

编辑：可能不重要，但有问题的过滤器：

Vue.filter('limitArray', function (arr, length = 3) {
    if (arr && arr.length) {
        if (length == -1) {
            return arr;
        }
        if (length > arr.length) {
            return arr;
        }

        return arr.slice(0, length);
    }

    return null;
});

我正在为我的 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", …

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

模板：

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

脚本：

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

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

在使用 Vue CLI 4.5.x 时，我尝试了以下代码：

import Vue from "vue"
import App from './App.vue'

new Vue({
    el: "#app",
    render: h=> h(App)
})

但不幸的是，它给出了以下警告：

"export 'default' (imported as 'Vue') was not found in 'vue'

我可以从中得出的结论是，Vue CLI 4.5.x 已经停止了这种首先创建 Vue 实例的应用程序创建方式。

初始化主应用程序，官方的方式如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

我不确定我的结论是否正确。如果有人能具体说明我的结论，那将是一个很大的帮助，因为到目前为止我还没有在 vue 的官方文档中找到任何证据。

此外，后面的代码是使用 Vue CLI 4.5.* 应用程序实例烘焙的，而前面的代码在使用 CDN 时是正确的。

考虑这个基本示例，其中我们有一个input和 ap显示输入的值：

const App = {
  data() {
    return {
      message: "hello world!"
    };
  }
};


Vue.createApp(App).mount('#root');

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

当您更改输入文本时，它会反映在p. 但是，如果您替换data()为setup()，则对 的更改input不再反映在p：

const App = {
  setup() {
    return {
      message: "hello world!"
    };
  }
};


Vue.createApp(App).mount('#root');

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  <input v-model="message"/>
  {{ message }}
</div>

一个简单的解决方法是ref在message：

const App = {
  setup() { …

我是 Vue 的新手，正在尝试学习如何使用它。

我想我在尝试安装一个新的 Vue 应用程序时被绊倒了。

这是我可以开始工作的内容：

<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({})
</script>

从那里我可以安装它并正确使用所有东西。

但是，这当前加载了旧版本的 Vue (2.6.7)

我想学习最新版本（Vue 3），所以我尝试导入Vue docs 推荐的包：

<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = new Vue({})
</script>

我在控制台中收到以下错误：

未捕获的类型错误：Vue 不是构造函数

我还尝试模仿Vue 3 文档中的语法。

<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = new Vue.createApp({})
</script>

但它抛出相同的错误：

未捕获的类型错误：Vue.createApp 不是构造函数

使用不同的 CDN 或特定版本 (vue@3.0.2) 也会给我相同的结果。

我究竟做错了什么？