我们如何在Vue JS中使用"name“或"id”属性值作为data属性？
在Vue JS中，可以使用"name"或"id"属性值作为data属性的方式有多种。下面是其中几种常见的方法：
- 使用props属性：在Vue组件中，可以通过props属性来接收外部传入的数据，然后将该数据赋值给组件中的data属性。例如：
<template>
<div>
<input type="text" v-model="name">
</div>
</template>
<script>
export default {
props: ['name'], // 接收外部传入的name属性值
data() {
return {
name: this.name // 将props中的name属性值赋值给组件中的data属性name
}
}
}
</script>- 使用计算属性（computed）：计算属性是根据其他data属性的值计算出一个新值，并将其绑定到组件中。可以利用计算属性将"name"或"id"属性值作为data属性。例如：
<template>
<div>
<input type="text" v-model="name">
</div>
</template>
<script>
export default {
data() {
return {
id: 123 // 假设组件中有一个"id"属性
}
},
computed: {
name() {
return this.id.toString(); // 将"id"属性值转为字符串，并作为计算属性"name"的值
}
}
}
</script>- 使用watch属性：可以通过watch属性监听"name"或"id"属性的变化，并在变化时更新组件中的data属性。例如：
<template>
<div>
<input type="text" v-model="name">
</div>
</template>
<script>
export default {
data() {
return {
id: 123,
name: ''
}
},
watch: {
id() {
this.name = this.id.toString(); // 监听"id"属性的变化，并将变化后的值赋值给"name"属性
}
}
}
</script>需要注意的是，在Vue JS中，组件的data属性是响应式的，当props属性或计算属性的值发生变化时，组件中的data属性也会相应地更新。以上是几种常见的使用"name"或"id"属性值作为data属性的方法，具体选择哪种方法取决于实际需求。
相关·内容
1回答
我在vue js里有很多代码。我无法从输入中得到价值，这是我的代码
HTML代码：
<div id = "app">
<div class="form-group">
<input type="text" class="form-control" name = "name" value = "lorem" v-model = "name"/>
</div>
<button class=
浏览 1提问于2018-08-08得票数 1
回答已采纳
我是vue.js新手，在此之前我使用的是jquery或js，我正在做的一个项目需要我在点击按钮时动态追加HTML元素，同时将输入值绑定到模型，类似于：
$(".button").click(function() {
$("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});
但是我需要用Vue.js的方式。
下面是我的代码：
data() {
浏览 31提问于2019-05-24得票数 3
回答已采纳
Vue实例允许您创建嵌套视图模型。例如，请考虑以下内容
new Vue({
el: '#app',
data: {
form: {
firstName: "Joe",
lastName: "Bloggs"
}
},
computed: {
name: function () {
return this.form.firstName + ' ' + this.form.lastName;
}
}
});
如您所见，有一个嵌套的表单数据对象:
浏览 13提问于2017-02-02得票数 3
我有一个SPA应用在Vue JS，我有一个侧导航栏，我想保持对所有页面可见。我在侧导航栏中设置了以下链接
{
name: 'Overview',
icon: 'ti-dashboard',
path: 'overview',
},
{
name: 'Areas',
icon: 'ti-map-alt',
path: '
浏览 3提问于2021-10-06得票数 0
回答已采纳
1回答
对于数组，vue.js good使用默认的数组方法: push，pop，shift，reverse...但是如何在对象中创建新项并粘贴一些值呢？
new Vue({
el: '#demo',
data: {
items: [
{
start: '12:15',
end: '13:15',
name: 'Whatch Vue.js Laracast',
description: 'Watched the Laracast ser
浏览 0提问于2016-06-25得票数 0
4回答
如何在列表大写中显示项目？
、、、、
我试图在vue ( TODO ).Here中做一个简单的列表示例，我试图添加大写的过滤器(换句话说，所有的字母都是大写的).But，它显示了me错误
这是我的代码
var app = new Vue({
el: '#App',
data: {
message: '',
items: [{
name: "test1"
}, {
name: "test2"
}, {
name:
浏览 4提问于2017-09-02得票数 0
回答已采纳
2回答
我需要创建一个使用绑定变量的动态链接。链接的“动态性”是通过使用绑定变量ip修改ip字段来完成的。
new Vue({
el: "#app",
data: {
ip: "10.1.1.1"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
<a href="http://example.co
浏览 1提问于2018-05-31得票数 0
我试着用Vue和Pusher在Laravel进行实时聊天。我已经做了所有事情，但是我不明白为什么我的组件ChatMessages.vue可以显示{{ message.user }，我可以看到用户有一个名称，但是它不能显示{ message.user.name }}。
示例：
{{ message.user }}
以下是结果
{{ message.user.name }}
以下是结果
这是我的密码：
ChatMessages.vue
<template>
<ul class="chat">
<li class="l
浏览 0提问于2019-01-01得票数 3
回答已采纳
我有一个Vue组件，像下面这样：
<div v-for="item in items" :key="there I want get the for-loop index" >
</div>
...
data(){
items: [{name:'a'}, {name:'b'}...]
}
当我在vue.js中执行for-循环时，如何获得索引？
浏览 2提问于2018-04-05得票数 109
回答已采纳
1回答
在此页面上
我可以设置这样的方法
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// define methods under the `methods` object
methods: {
greet: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ' + this.nam
浏览 0提问于2018-10-16得票数 1
回答已采纳
2回答
如何在vue js中使用监视功能
、、、、
请您告诉我如何在vue js中使用.I试图使用的watch函数，但我得到了这个错误。
vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m"
found in
---> &l
浏览 2提问于2017-09-02得票数 1
3回答
我已经开始从头开始学习VueJS。我正在关注他们的官方指南。但是我被困在这里了：
在这个例子中...
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
..how是否可以直接访问
浏览 2提问于2017-04-20得票数 13
回答已采纳
我用vue-cli建立了一个新的Vue应用程序。我有vue装载机和和vue路线也运行在这个项目.
如何在以下实例中访问属性events？
当前，以下代码导致以下错误：Property or method "events" is not defined on the instance but referenced during render
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.conf
浏览 0提问于2019-01-27得票数 2
回答已采纳
1回答
我想使用.js中的mapState从Vue.js文件中访问我的状态。
我试过了
import { mapState } from 'vuex';
const foo = {
...mapState(['axios']),
};
foo.axios.get('...');
但不起作用。错误是
TypeError: foo.axios.get is not a function
我应该怎么做才能做到这一点？
我已经搜索了其他问题，但是他们从store.state. ...访问，而不是使用我想要的mapState。
浏览 0提问于2019-08-02得票数 3
回答已采纳
Vue.js有一个，演示了如何构建包装按钮的功能组件：
<template functional>
<button
class="btn btn-primary"
v-bind="data.attrs"
v-on="listeners"
>
<slot/>
</button>
</template>
但是，我如何构建一个类似的使用select的组件，然后我可以在其父组件上使用v-model呢？
我想出了以下方法，但当我在上面使用v-model时
浏览 58提问于2019-03-26得票数 2
回答已采纳
2回答
Vue.js如何在实例上定义方法
、、、、
嗨，我正在尝试将json数据添加到元素中。我通过对外部API的jsonp调用获得数据。但不知何故，vue没有意识到变量的存在。因为这个应用程序是用laravel写的，所以我在laracasts上读到数据和方法属性应该是的，但这也不能解决我的问题。我使用的是vue.js2和laravel 5.4，我得到了以下错误：
app.js: Vue警告:属性或方法“名称”不是在实例上定义的，而是在呈现过程中引用的。确保在data选项.中声明反应性数据属性。
这是我的代码：
app.js
Vue.component('search',
{
template: '<
浏览 8提问于2017-06-08得票数 1
1回答
我只想问一下如何在Vue.js中绑定整个组件(例如div)。有没有像innerHTML这样的东西？下面是示例: Parent.vue <template>
<div id="parent">
//some elements
</div>
</template> Child.vue <template>
<div id="child">
//some different elements
</div>
</template> 现在如何在pa
浏览 10提问于2019-06-16得票数 0
回答已采纳
1回答
我通过AJAX从Vue实例获取数据，并且需要将数据传递给组件。我现在正在学习Vue.js是如何工作的，但是我发现文档有点零碎.
下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>mysite</title>
</head>
<body>
<div id="app">
<parent-component></paren
浏览 5提问于2017-08-24得票数 1
回答已采纳
我使用jquery与api进行通信，rest.And使用vue js将数据呈现给我的模板，但我有错误。
[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of undefined"
这是我的代码：
var dashboard = new Vue({
el: '#dashboard',
data:{
profile: {}
}
});
axios.get(url_profile, { headers: {"
浏览 1提问于2017-10-11得票数 1
回答已采纳
2回答
我正在上一个使用机器人改正代码的在线课程。在本课程中，我学习了超文本标记语言、JS和Vue.JS。
赋值是创建一个组件，greet，当使用<greet></greet>调用它时，它会生成<div>Welcome, Alice!</div>。赋值还希望我使用data和methods来生成它，所以当您单击组件中的div元素时，它会显示为Welcome, Bob。它告诉我在组件中使用data和methods键。
到目前为止，这是我的代码，但我被卡住了。HTML
<body>
<div id="app">&
浏览 15提问于2020-05-11得票数 0
我是Vue.js的新手，所以如果问题太简单，请耐心地对待我。
所以我有下面的Home.vue代码
<template>
<div class="home">
<div>
<b-table striped hover :items="borrowingHistroy"></b-table>
</div>
</div>
</template>
<script>
import userData from '@/dat
浏览 1提问于2020-11-01得票数 0
回答已采纳
这里我使用了vue.js代码，并创建了一个表单。实际上，在这里，我想设置一个表单按钮来禁用，直到所有字段都被完全填充，如果所有字段都被填充，那么表单按钮应该启用。就像任何字段都是空的，那么按钮就不应该被点击。如果所有字段都已填充，则用户可以单击该按钮。
<div id="form">
<input type="text" v-model='name'/>
<input type="text" v-model='fname'/>
&l
浏览 0提问于2021-08-03得票数 0
回答已采纳
1回答
我使用axios调用来获取这样的数据：
export default {
name: 'TaxesSection',
data () {
return {
isFormShown: false,
isLoading: false,
isOpen: false,
info: null,
dist: null,
tableauDistance: [],
tableauGeneral: {},
浏览 8提问于2022-07-20得票数 0
回答已采纳
我需要用于错误的全局变量。但我不想为每个组件都设置输入变量。如果没有输入变量，如何在组件ABC中查看$errors？
(without <abc :errors="$errors"></abc>)
index.js：
Vue.prototype.$errors = {};
new Vue({
el: '#app',
render: h => h(App),
}
App.vue：
...
name: 'App',
components: {
ABC
}
...
methods:{
getContent
浏览 2提问于2019-11-21得票数 4
我一直试图在我的vue3-runtime-template示例项目中使用vue3动态编译自定义vue模板。我还遵循了官方文档为这个库提供的配置指令：
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.js",
// ...
},
},
},
};
这应该允许在运行时进行编译。当我使用Options API (使用data：() =>
浏览 3提问于2021-03-12得票数 0
我想从一些页面重定向到404页面，如果有一个错误。它可以工作，但有一个隐蔽的错误。 Profile.vue methods: {
async getProfile(id) {
try {
const response = await this.$store.dispatch('GET_USER_PROFILE_BY_ID', { id });
this.userProfile = response.data.data;
} catch (err) {
this.$log.error(err);
await t
浏览 18提问于2020-11-21得票数 0
回答已采纳
2回答
我一直在阅读vue文档，并开始编写一些代码来测试我的知识。我曾尝试编写一个在挂载时设置数据成员的组件，但它似乎没有像预期的那样工作。组件数据成员“profile”始终为空。我的直觉告诉我这可能是关于范围的东西，但不确定：
Vue.component('profile-grid',
{
template: '<section> {{profiles}} </section>',
//Data es la parte privada del documento. Props la parte publica que se d
浏览 0提问于2018-07-02得票数 3
回答已采纳
1回答
我想将json数据(如packageJson )转换成一种适合树形图的分层格式。
使用d3.hierarchy来转换对象，正如我所理解的那样，包含嵌套数据的每个属性都需要使用下面的助手函数进行转换
const test = d3.hierarchy(packageJson, d => d.scripts);
是通过查找具有嵌套对象的每个属性来转换packageJson的唯一方法。
或者，对于这种任务，我不知道有什么d3助手函数吗？
const fam = d3.hierarchy({
name: "root",
children: [
{n
浏览 3提问于2021-09-17得票数 1
回答已采纳
1回答
VueJS警告避免直接更改道具
、、、、
当我尝试使用@click指令更改某个属性的值时，会收到此警告：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"
我的代码如下：
<html>
<head>
<ti
浏览 1提问于2018-09-02得票数 0
我目前在尝试使用webpack.ProvidePlugin时得到了这个，但似乎加载不正确。这是我的environment.js
var webpack = require("webpack");
const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");
environment.loaders.append("vue", vueLoader);
environment.plugins.appe
浏览 0提问于2018-04-02得票数 8
1回答
Vue实现变量
、、、、
我正在使用vue.js，并且我有一个应用程序，
var vm = new Vue({
el: '#app',
data: function() {
return {
elements: json_data,
}
}
})
我还有一个在html中导入的js文件：
<script src="javascriptFile.js" defer></script>
json_data是javascriptFile.js中的一个全局变量。当我修改文件时，我的vue应用程序不会重新
浏览 1提问于2019-02-12得票数 0
2回答
Vue路由器在主Vue实例之前加载，但是要加载该路由器，我需要准备一些信息，然后将它们作为属性传递给该路由。在本例中，它是从主Vue实例传递到主屏幕的currentTime。
也许保持$Store上的所有东西都能解决这个问题，但目前项目还没有实现Vuex。我现在做不到。
有什么建议吗？
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './registerServiceWorker'
浏览 1提问于2019-10-22得票数 4
回答已采纳
1回答
我在一个实例中定义了一些数据，但是当我使用这些数据时，我会收到以下消息：
属性或方法"url“不在实例上定义，而是在呈现过程中引用。确保在data选项中声明反应性数据属性。
这就是数据所在的位置：
Vue.component('app-dashboard', require('./components/AppDashboard.vue'));
Vue.component('header-top', require('./components/Header.vue'));
Vue.component('nav
浏览 2提问于2017-07-25得票数 1
回答已采纳
1回答
无法检索存储文档Geopoint(location)和Timestamp(date以及时间)的对象到vue.js vuetify。位置显示对象对象而不是位置数据(经度：‘’和纬度：‘’)表column.Timestamp不检索日期，time.It只检索时间戳(seconds=1631868600，time.It)
用于防火的db.js
import firebase from 'firebase/app'
import 'firebase/firestore'
import Vue from 'vue'
import { firestorePlu
浏览 4提问于2021-09-26得票数 0
1回答
我正在使用创建web应用程序。树是基于Golang后端的数据构建的。树形树叶在应用程序运行时更改自定义图标。如何在不刷新页面的情况下根据后端数据更改图标？
随着http-equiv=“刷新”页面的闪烁和失去焦点。下面是使用zTree和refresh的示例(为了简单起见，我切割后端部分)：
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refres
浏览 4提问于2020-12-25得票数 0
回答已采纳
8回答
我是vue.js的新手。我的问题是：
在这样的*.vue文件中：
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<sty
浏览 2提问于2017-03-18得票数 107
回答已采纳
我使用的是Vue js 2+版本，根据我的要求，我创建了一个数据格式筛选器，但是我听说在Vue 3中，过滤器被删除了，而是需要使用计算或方法，这里的问题是如何为版本2和版本3编写兼容的版本。
我写的Vue js 2过滤器
<ul>
<li v-for="(info, index) in data">
{{info.time.data | Filter}}
<li>
<ul>
过滤请求：
filters: {
Filter(date){
return moment.unix(d
浏览 6提问于2020-10-21得票数 0
回答已采纳
我有一个global.js，我正在向global.js发出一个事件，我想要达到的是每当我的global.js重新呈现vue的值。
global.js
export let globalStore = new Vue({
data: {
translateBool: 0,
about: [`About Us`,`フィリピンのマニラに 2015年9月に設立。`]
},
methods: {
changeLanguage(){
if(this.translateBool == 0){
this.translateBool=
浏览 2提问于2017-09-20得票数 0
回答已采纳
3回答
我很难理解在Vue.js中使用Karma、Mocha和柴进行单元测试的一些基本概念。
这是我的组成部分：
VueExample.vue
<template>
<div>
<p>{{ name }}</p>
<input v-model="name">
</div>
</template>
<script>
export default {
name: 'VueExample',
浏览 6提问于2020-01-24得票数 5
回答已采纳
3回答
我的VUE文件中有以下代码： <template>
<div class="row">
<div class="col-12">
<section class="list">
<draggable class="drag-area" :list="picsNew" :options="{animation:200, group:'status'}" :element="&#
浏览 57提问于2020-04-25得票数 0
回答已采纳
2回答
我正在使用安装了vue-router的Vue-cli，在我的App.vue中，我有一个<router-link to="/about" >About</router-link>，它将在点击时显示关于组件的内容。现在，我想将props数据从 App.vue传递到About.vue组件。在<router-link to="/about" :myprops="myprops">About</router-link>中添加:myprops="myprops“不起作用，这就是为什么我在App.vue
浏览 0提问于2018-07-09得票数 3
回答已采纳
我在vue.js中有一个全新的应用。我想使用子组件中选中的复选框来更改app.vue的数据值，我将如何实现这一点我在这两个文件中使用的代码是：
组件文件：-
<template>
<div>
<h3>Edit the user</h3>
<p>Local: {{ $route.query.local }}</p>
<p>Number is:- {{ $route.query.q }}</p>
<label><input type="c
浏览 58提问于2018-08-12得票数 0
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/vue.js"></script>
<meta charset="UTF-8">
<title>V-for example</title>
</head>
<body>
<script type="
浏览 1提问于2016-03-01得票数 1
回答已采纳
我是Vue.js新手，我的第一次尝试是使用ChartJS (vue-chartjs bundle)创建一个简单的折线图。
我使用"HelloWorld.vue“作为基础材料，并创建了一个LineChart.js
问题是，在HelloWorld中，我得到了一个名为datacollection的变量，这个名称被传递到我的LineChart.js中。如何解决变量名不能作为对象获取的问题
我得到了：
datacollection:
{
labels: {...},
datasets: {...}
}
我想要：
{
labels: {...},
datasets: {...}
}
浏览 3提问于2017-12-19得票数 1
回答已采纳
1回答
我正在尝试使用Laravel5.3和Vue.js进行一些简单的表单验证。
Laravel控制器：
public function test(\Illuminate\Http\Request $request)
{
$this->validate($request, [
'name' => 'required',
'date' => 'required'
]);
...
}
Vue数据：
let app = new V
浏览 0提问于2016-12-14得票数 0
回答已采纳
我在用vue js建一个strapi网站。
在strapi中，我有一个名为"webinars“的自定义集合类型--要命中的端点如下所示：
const response = await axios.get('http://localhost:1337/webinars')
上面的内容返回一个JSON对象。
要访问单个webinar，每个站点都有一个唯一的标识符，从1开始，以访问类似于以下内容的各个webinars数据：
const response = await axios.get('http://localhost:1337/webinars/1')
浏览 3提问于2021-03-02得票数 0
回答已采纳
我正在通过上的参考文档学习。
然后，我要做一个例子。但是，部分示例不起作用。
这是我的密码。
<template id="app-3">
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</template>
<script src="vue.js"></script>
<
浏览 1提问于2018-05-12得票数 0
回答已采纳
1回答
如何将支柱插入<路由器-链接>？
、、、、
如果我做了这个{{ name }}，我就会有“竞选”
我想把它呈现到我的链接中
<router-link :to="'/' + '123' + '/' + item.id"> {{ item.name }}</router-link>
我试过用{{ name }}替换'123‘
<router-link :to="'/' + {{ name }} + '/' + item.id"> {{ item.name }}</router-li
浏览 4提问于2022-01-25得票数 -1
我目前正在Vue Js项目中使用element-ui版本2.14.1。我只是按需要导入select组件，这是element在这里推荐的。在我使用select组件的每个组件中，都会在控制台中得到这个错误。
[Vue warn]: Computed property "validateState" was assigned to but it has no setter.
found in
---> <ElInput> at packages/input/src/input.vue
<ElSelect> at packages/sele
浏览 10提问于2020-11-29得票数 0
回答已采纳
1回答
如何在父vue中触发组件？
、、、、
我使用的是Laravel 6(混合)+ Vue.js 2。
我正在创建一个多语言字典，用户可以在其中添加单词，对于每个单词，他们可以添加多个定义与他们的翻译。
内部index.blade.php
<div class="modal fade" id="modal-addItem">
<form>
<div class="card" v-for="(value, index) in nbDefinitions">
<div class="
浏览 4提问于2019-11-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
