如何在Vue.js中将变量推送到另一个组件数组
在Vue.js中，可以通过props属性将变量推送到另一个组件数组。以下是一些步骤和示例代码来实现这一功能：
- 在发送变量的组件中，定义一个props属性，并将变量作为props的值传递给接收变量的组件。可以通过v-bind指令将变量绑定到props上。
<template>
<div>
<another-component :variable="myVariable"></another-component>
</div>
</template>
<script>
export default {
data() {
return {
myVariable: 'Hello world'
};
}
};
</script>- 在接收变量的组件中，通过props属性接收变量，并在模板中使用它。
<template>
<div>
<ul>
<li v-for="item in variableArray" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: ['variable'],
data() {
return {
variableArray: []
};
},
watch: {
variable(newVariable) {
this.variableArray.push(newVariable);
}
}
};
</script>在上述代码中，当发送变量的组件中的myVariable发生变化时，接收变量的组件中的variableArray将自动更新，新的变量将被推送到数组中，并在模板中展示出来。
这样，在Vue.js中就可以将变量推送到另一个组件数组了。这种方法可以用于实现兄弟组件之间的数据传递和共享。对于更复杂的应用场景，可以使用Vuex来管理组件之间的状态。有关Vuex的更多信息，请参考腾讯云的相关产品文档：Vuex - 状态管理模式。
相关·内容
1回答
我使用的是Vue.js模板。我想将menuItemsData传递给另一个vue组件( timeselect) (在图2中，我推送到另一个组件timeselect)。我看过多个教程，但我不知道如何在这里使用v-bind？
即使我设法将它推送到另一个组件，我将如何接收它？
浏览 1提问于2018-03-04得票数 1
我有一个flask变量，我试图在vu.js分隔符中将其用作ID：['['，']']。举个例子，我在<p>标签中定义的flask id包含“阿联酋”一词，所以我想从vue _ js中将字符串"hi“推送到由flask呈现的阿联酋id。我希望我的话听起来不会太混乱。
<i class="ui orange tiny label">
<p id="[[{{ i.App }}]]"></p> # This is flask rendered variable inside vue.j
浏览 25提问于2019-08-08得票数 0
2回答
我希望在Vue.js中获得道具值，因为我需要在组件中接收eid来进行验证，但我不知道如何做到这一点，如果我这样做，那么Vue.js就是未定义的。另一种方法是将data()值从组件A发送到组件B。
我有这个组件，我需要得到eid，然后插入v-if
<section v-if="" >
<stream :configs="{eid : event.id}"></stream>
</section>
另一种方法是将数据()从组件A发送到组件B
data() {
return {
tipo: String
浏览 4提问于2020-04-02得票数 0
回答已采纳
3回答
我正在尝试将使用setData函数设置的数据推送到数据中。我可以推一次数据，但是当我第二次推送数据时，它取代了数据，而不是存储在datas1。我在这里做错什么了。提前谢谢你。
export default function App() {
const [data,setData]= useState([]);
const [activity, setActivity]= useState([])
const [name, setName] = useState("")
const datas=[];
useEffect(()=>{
// handlePre
浏览 1提问于2022-05-03得票数 4
回答已采纳
在Vue.js中，我有以下代码(带有类型记录Vue.js 2和类组件)：
toggle(id: string): void {
if (this.selectedIds.has(id)) {
this.selectedIds.delete(id);
} else {
this.selectedIds.add(id);
}
}
和
get handledUsers() {
return this.users.map((user) => ({
...user,
selected: this.selectedI
浏览 2提问于2021-12-27得票数 1
3回答
我正在学习Vue.js，我很难找到任何与这个主题相关的东西。我从API获取数据，它正确地显示在console.log中，但是我似乎不能将其返回到模板视图。我不会尝试将此数据发送到另一个组件；我想要显示它。你怎么做到这一点呢？在React中，我将对结果执行map并返回HTML。在Vue.js中如何做到这一点？另外，我在Laravel 8中这样做。 <template>
<div>
{{ data }}
</div>
</template>
<script>
let api = location.
浏览 75提问于2021-07-03得票数 1
回答已采纳
这是我在父组件中的代码：
<div
v-for="measurement
in measurements"
:key="measurement.id"
>
<graph-component
浏览 4提问于2021-11-29得票数 0
回答已采纳
我第一次使用vue.js扩展。我有一个扩展另一个组件的组件，它需要读取根组件数据来更新自己组件中的状态。
我发现，扩展其他组件的组件在呈现时似乎只获取根数据的副本，但是如果我更新根组件中的属性，则扩展组件中没有更新属性。
因此，如果扩展组件在根用户不更新时不更新，我可能不会这样做。例如，我希望检查根组件上的数组的长度，并更新另一个数据值。它更新根上的值，但不更新扩展组件上的值。
这是否是预期的行为，我是否可以将更新的数据发送到扩展组件？
样本代码：
<a inline-component>
<input type="text" v-model="myA
浏览 0提问于2019-07-30得票数 0
我是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
回答已采纳
因此，我试图将一个变量从我的状态中推到一个名为list的数组上。但是它正在抛出这个错误，说未定义不是一个函数。然而，当我切换推送到连接时，它就能工作了。但是我想用推，因为它更快。我该如何解决这个问题？
AsyncStorage.getItem("one").then((value) => {
if (value === "true"){
this.setState({
list: this.state.list.push({
name: 'Butter',
chec
浏览 0提问于2018-10-07得票数 3
回答已采纳
4回答
将数据从一个页面传递到另一个页面的简单任务让Vue.js新手非常头疼。这是我的路由器
我正在"/“页面上呈现一个表单，该表单发出一个API请求，
我只想用另一个组件将数据传递到另一个路由页面
在Vue做这件事有那么难吗？今天真的让我很头疼。从API获取数据，保存并发送到另一个组件。我该怎么做呢？
浏览 3提问于2017-08-03得票数 9
回答已采纳
在vue.js route.js中
[{path: "/path", name: "acomp_name", component: PathComp, props: { abc: {} }}]
comp.vue
<script>
...omitted_for_brevity,
methods: {
changeRoute(json_sample){
this.$router.push({name: "acomp_name", params: { abc: json_sample })
}
}
</script&
浏览 9提问于2021-09-17得票数 0
回答已采纳
3回答
我使用的是Vue.js组件vue-tags-input。我希望以以下格式编辑存储在db中的标记:1、2、3、4、5、6。
我通过,拆分数据，并将值推送到标记数组中。
var tags_split = this.resources[index]['tags'].split(',')
for (var item in tags_split){
this.tags.push(tags_split[item]);
}
var app = new Vue({
el: '#app',
data: {
tags: [],
tag:
浏览 4提问于2019-08-17得票数 2
回答已采纳
所以，我有一个包含多个子组件的应用程序。基本上是个电子表格。
当任何单元格发生变化时，我希望能够计算组件的总和。我已经找到了一种方法，通过在传播更改事件时缓存单元格的所有值来存储它们。但是，这是最好的方法吗？有更好的方法来动态抓取孩子吗？我知道props是发送数据的方式，但是我如何提取数据呢？
这是HTML：
<html>
<head>
</head>
<body>
<span id="calculator">
<template v-for="i in 5">
<cell v
浏览 3提问于2016-12-14得票数 1
回答已采纳
如果我有一个变量，其值可以根据另一个属性的值完全导出，那么初始化计算变量与使用useState/useEffect组合跟踪变量是否有任何后果/缺陷？让我以一个人为的例子来说明：
/**
* ex paymentAmounts: [100, 300, 400]
*/
const Option1 = ({paymentAmounts}) => {
const [average, setAverage] = useState(paymentAmounts.reduce((acc, curr) => curr + acc, 0) / paymentAmounts.length)
浏览 8提问于2021-06-28得票数 3
回答已采纳
1回答
使用Perl，我试图将数组的元素推送到另一个数组，而不是整个数组。但我没有达到我的目标。
我试过这个：
push @tmp_entities_all, @tmp_entities;
但是我得到了整个小数组作为大数组中的一个元素。
然后我尝试了一个循环：
for (@tmp_entities) {push @tmp_entities_all, $_;}
但是同样的结果，整个@tmp_entities作为一个元素出现，这是我不想要的。
我需要数组中的一维而不是数组的数组！！我应该先投点东西然后再推吗？或者是什么问题？
非常感谢。
浏览 2提问于2014-04-11得票数 0
回答已采纳
1回答
我是Vue的新手，我有一个问题：
这是我的index.html，我使用了2个自定义标记aas、和index.html：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="root">
<aas></aas>
<task></task>
</div>
<script
浏览 43提问于2018-05-29得票数 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
回答已采纳
2回答
我对编程很陌生。当用户向新闻添加注释时，我尝试使用function并拥有函数addComment，此时我需要创建一个属性注释(数组)，并分配或推送到这个数组的值。但是现在我只重写数组的0元素，不能添加新元素。你能告诉我推法在哪里吗？谢谢!
var ARTICLES = [{
title: "sit amet erat",
text: "nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan"
}, {
title: "pulvinar
浏览 0提问于2016-07-11得票数 2
回答已采纳
当涉及到将数据从数据库推送到网页时，我遇到了vue.js的问题。我使用的是Laravel5.3，它将数据转换为Jason。代码向服务器发布要获取的记录数，然后将服务器响应与我希望在网页上显示的数据一起发布。这是Vue js代码
new Vue({
el: "#projects",
data: {
count: 0,
fetched_projects: []
}
methods:{
checkproject: function(){
var fetch =
浏览 1提问于2017-03-28得票数 1
回答已采纳
我正在使用Laravel和Vue.js。所以在刀片模板中，我想在Vue.js组件模板中使用PHP变量。所以我尝试了下面的代码。 Vue.component('add-edit-card', {
data: function() {
return {
topt : `{!! $types !!}`
}
},
template: ` <select id="component-type" class="form-control"&g
浏览 64提问于2021-05-10得票数 0
1回答
我想问您，在VUE.JS组件'A‘中，是否有可能调用另一个使用组件'A’的VUE.JS组件'B‘的方法。
谢谢
浏览 5提问于2020-10-09得票数 0
回答已采纳
1回答
我想在组件的某个方法被调用时更新组件模板。就像resolve函数，或者Vue.compile render选项，或者v-html绑定选项(但是实际上是在编译模板)。
如何从component方法中调用resolve函数。
这是可能的吗?我应该如何使用Vue.js来做到这一点？
浏览 11提问于2017-01-20得票数 2
我正在使用Bootstrap-4和Vue.js创建一个模拟任务管理器。我对这一切都是新手，但我已经走得很远了。我必须做的最后一件事是将输入数据从我的一个html页面发送到另一个页面，该页面有一个应该用输入数据填写的表单表。我已经粘贴了我的代码的插入器链接。我需要帮助理解如何发送输入数据来填写表格。
谢谢!
浏览 2提问于2018-06-12得票数 0
2回答
我需要这样做：
<app-popover #popName texto="{{'texto'='errorName1' | translate}}" ></app-popover>
<app-popover #popName texto="{{'texto'='errorName2' | translate}}" ></app-popover>
<app-popover #popName texto="{{'texto'=
浏览 25提问于2020-03-03得票数 0
我有一个react原生函数组件，它使用Apollo钩子进行一些useQuery查询。当呈现这个组件时，它从上一个页面接收一个id prop。所以我需要在graphql查询中动态使用这个id。 我可以像这样轻松地在组件内部完成这项工作 const query = gql`
query MyQuery {
getItems(id: \"${id}\") {
items {
name
price
}
}
}
`;
const { loading, error, data }
浏览 12提问于2021-03-26得票数 0
回答已采纳
我是Vue.js的新手。我已经有一个div内容了。<div class="test1">text text text etc. </div>)。我正在尝试将这个div移动到另一个div中。我知道如何在jQuery中这样做：
$(".test1").appendTo(".test2")
但是如何在Vue.js中做到这一点呢？我还试图以这种方式存储数据：
const App = new Vue({
el: "#app",
data: {
page_footer_code: (.tes
浏览 1提问于2019-09-03得票数 0
7回答
下面是我当前的模板：
<a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}">
<a-draggable :class="{thin: rowLenMap[orderList[n - 1]] > 10}">
<some-inner-element>{{rowLenMap[o
浏览 79提问于2017-05-16得票数 59
回答已采纳
我正在做一个项目，在这个项目中，我应该创建一个认证系统在laravel的api。我使用了jetstream和惯性。我有两个文件夹，一个是我的api和jetstream auth，另一个是我的vue.js项目，我将在其中实现axios请求。如何将jetstream集成到我的vue.js项目中？或者我可能做错了什么？提前谢谢你。
浏览 12提问于2020-11-19得票数 0
2回答
我正在开发一个浏览器插件，它将当前页面或任何选定链接的URL作为参数，并将其发送到我们的服务器。当url中存在基本的拉丁字母字符(如)时，该插件工作正常。但是，当URL包含来自另一个字母表的字符时，例如，插件不能工作，我确实使用了encodeURIComponent方法，但这似乎不能解决问题。有什么想法吗？
谢谢,
奥利维尔。
浏览 1提问于2010-09-15得票数 3
回答已采纳
我发现了这个不错的
现在我的问题是:我想共享注销方法，所以我在auth.ts文件中创建了这个函数
import Router from 'vue-router';
const router = new Router({
mode: 'history'
});
export function logout() {
router.replace('/'); // It changes url but doesnt render component :-(
router.go(0); // It reload the applicati
浏览 13提问于2018-01-22得票数 1
2回答
我将以下组件定义为：
import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';
Vue.component('DatePicker', {
template: `
<datepicker name="date"></datepicker>
`,
});
我试图从另一个文件导入它并在另一个组件中使用它，但是由于某些原因，我得到了如下错误：
Vue警告:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供&
浏览 1提问于2019-02-27得票数 0
回答已采纳
我有一个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
回答已采纳
2回答
以下是我所拥有的，我将尽我所能加以解释：
在我的HTML代码中有一个模型，如下所示：
id="favorites-modal-edit"是Vue.js应用程序，然后是<favorites-edit-component /> vue.js组件。
这里是我有的JS代码
我生成了我的favorites_list，它是一个对象数组，如下所示：
const favorites_list = [
{
id: 1,
name: 'Horse',
url: 'www.example.com
浏览 2提问于2021-02-03得票数 0
回答已采纳
我有一个布局文件，其中有一些数据。此外，我还有三个组成部分：
标签
学生
行为
我想声明布局文件中的数据，但是通过三个子组件访问它。
这是如何在Vue.js中完成的？
谢谢你的帮助。
浏览 0提问于2017-01-25得票数 0
使用Vue.js和Vue-meta，我在我的App.vue中配置了utf-8，如下所示：
metaInfo() {
return {
title: 'My',
titleTemplate: '%s | Titulo',
meta: [
{ equiv: 'Content-Type', content: 'text/html; charset=utf-8' },
{ name
浏览 274提问于2020-06-09得票数 1
1回答
在vue.js中，在不改变父数据的情况下编辑支柱的正确方法是什么？我的意思是，每当我们在vue.js中将任何属性从父组件传递到子组件时，如果我们在子组件中对该属性进行任何更改，那么更改也会反映在父组件中。
在vue.js中有任何方法可以在子节点中复制传递的属性吗？
我在googled上搜索了一下，但是无论在哪里，我们都可以通过这样做来实现这一点。
props:["user"],
data(){
return {
localUser: Object.assign({}, this.user)
}
}
在这里，用户被传递了一个对象，我在本地用户
浏览 0提问于2018-09-22得票数 19
回答已采纳
我已经在Vue.js中重用了我的组件，并尝试使用'beforeRouteEnter‘导航保护来更新该组件中的数据字段。但是组件没有更新。我是不是应该用另一个导航员？ beforeRouteEnter (to, from, next) {
this.getServices()
next()
},
methods: {
getServices() {
axios.get('/service').then(res => {
console.log(res)
}).catch(err => {
conso
浏览 15提问于2019-04-07得票数 0
2回答
我必须使用Abc变量从a.tsx到另一个b.tsx文件。如何访问另一个.tsx文件中Abc变量？
当前a.tsx：
export const ProfilePicEditor = (props: ProfilePicEditorProps) => {
const [Abc, setAbc] = useState(
'some string'
)
我尝试在我的a.tsx文件中执行‘导出{Abc}’，并将其作为'Import {Abc} from‘.tsx’导入到b.tsx文件中。但这并没有成功。有什么可能的原因吗？
浏览 34提问于2019-08-06得票数 0
回答已采纳
我需要将数据从子组件发送到其父组件(通过发出)，一旦子组件被加载，而不调用任何事件，如click或keyUp，...
换句话说，我希望在挂载子组件后，它会自动向父组件发送一些数据，而不必调用事件来发出数据。
在vue.js中有什么方法可以做到这一点吗？
我会提前谢谢你的
浏览 1提问于2021-04-29得票数 0
我正在使用Laravel + Inertiajs (Vue)。我正在渲染一个带有道具的页面。“组织”。
public function index()
{
$this->access();
$companyOrganisations = $this->user->companyUser->company->organisations;
return Inertia::render('CompanySettings/CompanyOrganisations', [
'organisations'
浏览 0提问于2021-09-02得票数 1
1回答
字符串数组作为变量
、、、
我在SSIS中使用了一个web服务任务，它运行良好。其中一个参数是string[]数组。我可以在编辑器中键入值，它可以正常工作，但是我希望从一个变量加载它。但我不知道如何创建/设置字符串数组变量。我创建了一个字符串变量，并将其设置为{ 'Test‘}或’Test‘之类的东西，但它们没有工作。
最终，我要做的是让它成为一个表达式，其中一些字符串是其他变量。ArrayList = @SystemVariable::PackageName，@SystemVariable：：TaskName.
浏览 0提问于2012-02-17得票数 2
我仍然在学习vue.js并构建一个laravel/vue.js广告投放应用程序。我构建了我的应用程序，使登陆页面(一个Laravel刀片视图)有一个大横幅介绍该应用程序，在ads.When列表下面，用户点击一个广告，他/她就会看到广告的单一页面(这将是一个组件)。我面临的挑战是，我希望应用程序是一个单一页面应用程序，但不希望在显示单个页面组件时显示横幅。我将根组件放置在欢迎视图中，然后在组件中使用路由器视图导入组件。我的问题是，当我单击Ad时，单个页面组件会加载横幅。我如何使这个布局，使横幅不加载单页组件？
浏览 0提问于2018-10-13得票数 0
回答已采纳
我在项目中定义了一个组件，并希望像这样公开，以便在另一个项目中使用：
从‘./ ToastNotification’导入ToastNotification；从‘./ Api’导入Api；从‘./Api’导入Api；从‘./Api’导入Api；从
在index.js中，我声明：
从‘./ VueToast /js/index’导入Vue.use(VueToast)；
在另一个项目中，npm将这个项目安装为一个库，但是这个。$ this (‘message’)是不被识别的。它说“属性'$toast‘在’类型‘上不存在”
我提到，我设法在项目内部使用了另一个类--‘this.
浏览 1提问于2021-03-19得票数 3
2回答
我正在学习MVP结构，并试图找出：
如何在模型之间传递数据？
每个模型代表一个动作，如果我需要将数据从一个模型发送到另一个模型，我如何才能正确地完成它？我应该通过演示者传递数据吗，比如
firstModel -> commonPresenter -> secondModel
或
在模型之间发送数据，如
firstModel -> secondModel?
如果这些模型与不同的主持人交互呢？
浏览 6提问于2017-01-14得票数 0
我需要由Laravel中的Vue.js/React.js提供功能。Livewire是否取代了上面的(Vue.js/React.js)？谢谢
浏览 3提问于2020-12-09得票数 1
回答已采纳
这是我第一次使用，但我需要为使用。
许多必须首先异步加载Facebook的文档。
我知道在StackOverflow上有一些关于这个话题的问题，但我的情况不同。
我不能使用这个选项，因为我使用的是，只有才会使用Facebook进行登录。
我对Vue.js还不太了解。尝试就像是打开了一罐全新的蠕虫。
在Vue.js单文件组件中是否有异步加载Facebook的示例？
浏览 2提问于2018-08-21得票数 1
在PHP中，当我们从另一个文件中包含代码时，我们包含它，也就是说，代码现在可以在我们执行包含的文件中提供给我们。但是在Vue.js中，在导入组件之后，我们还必须导出它。
为什么？为什么我们不直接导入它呢？
浏览 0提问于2018-08-27得票数 10
回答已采纳
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
回答已采纳
5回答
我想上传照片到twitter，facebook和twit pic和更多。我把它放在数组中，并在表视图中显示。我正在使用shareKit。我写了这样的代码:如果我选择一个单元格(对于eg.Twitter)，然后它会将照片上传到推特，我想选择多个单元格，并在一个按钮上执行此发送操作(发送到选定的行项)。我可以标记/取消标记单元格，但如何获得单元格的选定值。我不希望它处于表格的编辑模式。
代码：
- (void) tableView:(UITableView *)atableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
浏览 1提问于2011-05-12得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
