vue父组件获取子组件数据对象

我想在父组件上获取排子组件数据对象

<ct-select
    v-model="text"
    @getSearchName="getName">
    <ct-option 
      v-for="(item, index) of dataList" 
      :key="index"
      :value="item.value"
      :label="item.label">
    </ct-option>
  </ct-select>

在父组件ct-select里的mounted下用this.$slots.default
获取为undefined,因为dataList是异步获取到的


//ct-select
  export default {
    mounted() {
        console.log(this.$slots.default) //undefined
    }
  }

有什么办法可以在异步的情况下在mounted里能获取到子组件上的数据对象??

2个回答

<ct-option ref="ctOption"
      v-for="(item, index) of dataList" 
      :key="index"
      :value="item.value"
      :label="item.label">
 </ct-option>
 export default {
    mounted() {
        this.$refs.ctOption.default
    }
  }

建议使用vuex或者自己写一个全局变量模块,通过监听而改变

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
component 动态组件为子组件, props获取不到数据

props 获取的值为undefined 需求: 1、需要将 父组件获取到的数据传递到对应组件的data里 ,通过:list 传递给小组件到的 这是引入component 的 父组件 ``` <template> <!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> --> <eptaskpage :lists="lists"></eptaskpage> </template> <script> import eptaskpage from "@/pages/task/task-page/task-page.vue" export default { components: { eptaskpage, }, data() { return { lists: { banner: [], grid: [], } } }, onLoad() { console.log('开始加载数据') // this.getBanner(), this.getGrid() // this.getLcard2() // this.getAdList(); }, methods: { async getBanner() { let _self = this; let param = { type: '0' }; _self.banner = await _self.$apis.getBanner(param); }, // getGrid() { // var _self = this; // console.log(_self,9585) // }, getGrid() { var _self = this; uni.request({ url: 'http://122.112.191.190:8080/API/more_video', //请求接口 data: { 'video_type': '', 'price_order': '', 'hot_order': '', 'price': 'F', 'discount': '', 'general_order': '' }, success: (res) => { _self.lists.grid = res.data.data console.log(res, "111111111111") this.flag = true } }); }, ``` 这是component 子组件,用import 引入的小组件来动态生成的页面,封装成为组件 ``` <template> <joy-page class="ep-taskpage"> <div v-for="(item,i) in page_template.items" :key="i" v-if="lists"> <component :is="item.component.tag" :list="item.component.data"></component> </div> </joy-page> </template> <script> import { mapState, mapGetters } from 'vuex' import epSearch from "@/components/ep-search/ep-search.vue" import epSwiper from "@/components/ep-swiper/ep-swiper.vue" import listTitM from "@/components/ep-tit/ep-tit-m.vue" import listTit from "@/components/ep-tit/ep-tit.vue" import epGrid from "@/components/ep-grid/ep-grid.vue" import epCard from "@/components/ep-card/ep-card.vue" import epCcard from "@/components/ep-ccard/ep-ccard.vue" import epCcard2 from "@/components/ep-ccard/ep-ccard2.vue" import epBox2 from "@/components/ep-box/ep-box-2.vue" import epLoadMore from '@/components/ep-b-tab/uni-load-more.vue' import epListCp from "@/components/ep-list-c/ep-list-cp.vue" export default { name: 'eptaskpage', components: { epSearch, epSwiper, listTit, epGrid, epCard, epCcard, epCcard2, epBox2, listTitM, epLoadMore, epListCp }, props: { lists: { type: [Array, Object, Number], default () { return } } }, data() { return { page_template: { //页面的模板,整页 template: "", //可以指定前端对应的templete,无则默认 items: [ //页面上的组件数组,按顺序显示 { component: { tag: "ep-search", data: ['grid'] } }, { component: { tag: "ep-swiper", data: ['banner'] } }, { component: { tag: "ep-grid", data: ['grid'] } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-box-2", data: ['adList'] } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-ccard", data: ['lcard'], } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-ccard", data: ['lcard2'], } }, { component: { tag: "list-tit-m", data: ['listTitM'] } }, { component: { tag: "ep-ccard2", data: ['lcard3'], } }, ] }, } }, ```

如何在vue实例化对象中获取组件中绑定的自定义的属性

如何在vue实例化对象中获取组件中绑定的自定义的属性 <combo v-bind:step="5"> var vm=new Vue({ 如何获取step值 })

vue 完全独立的两个组件可以做到数据共享,数据监听吗?

vue 完全独立的两个组件可以做到数据共享,数据监听吗? 例:a组件改变store 中的数据,b组件computed:{li(){return store 中的数据}}, watch:{li(newV,old):{console.log(newV)}}监听, a,b组件不在同一个父组件中,是完全独立的两个组件,没有任何关系, 为什么监听不到数据的变化呢?求解!!!!!!

vue的<component>怎么动态获取绑定的多个组件的props的值

vue的<component>怎么动态获取绑定的多个组件的props的值?这是一个tab切换的demo,三个切换按钮,点击切换对应的组件显示。新手一枚,这么写在选中组件1没选中的另外两个组件的情况下总显示caseconts2="[object Object],[object Object],[object Object],[object Object]"和caseconts2="[object Object],[object Object],[object Object],[object Object]" ``` <div class="casetabs"> <ul class="clearfloat"> <li @click="toggleTabs(index,tab.view)" v-for="(tab,index) in casetabs" :class="{case_on:case_on==index}">{{ tab.type }}</li> </ul> </div> <component :is="currentView" :caseconts1="caseconts1" :caseconts2="caseconts2" :caseconts3="caseconts3"></component> ``` ``` Vue.component("case1", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) Vue.component("case3", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) Vue.component("case2", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) ``` caseconts1,caseconts2,casecont3是json获取的 ``` var app = new Vue({ el: '#dre', data: { casetabs: [ { type: '最新案例', view: 'case1' }, { type: '热门案例', view: 'case2' }, { type: '经典案例', view: 'case3' } ], caseconts1:[], caseconts2:[], caseconts3:[], }, mounted: function () { this.$nextTick(function () { app.cartView(); }) }, methods: { cartView: function () { var _this = this; this.$http.get("data/index.json", { "id": 123 }).then(function (response) { _this.caseconts1 = response.data.result.caseconts1; _this.caseconts2 = response.data.result.caseconts2; _this.caseconts3 = response.data.result.caseconts3; }); ``` ![图片说明](https://img-ask.csdn.net/upload/201906/14/1560485189_69296.png)

在模式vue组件表单中绑定数据库表值

<div class="post-text" itemprop="text"> <p>In my Laravel 5.3 application, I am having a modal component which gets displayed when a user clicks on a button to edit the data.</p> <p>Loading of modal window is done with the following code:</p> <pre><code>&lt;a href="#" class="btn btn-sm btn-info" data-toggle="modal" data-target="#editCountryModal" data-country-id="{{ countries['id'] }}" data-country-code="{{ countries['code'] }}" data-country-name="{{ countries['name'] }}" data-country-currency-code="{{ countries['currency_code'] }}" data-country-currency-name="{{ countries['currency_name'] }}" data-country-display="{{ countries['display'] }}" &gt; &lt;i class="fa fa-lg fa-pencil"&gt;&lt;/i&gt; &lt;/a&gt; </code></pre> <p>The above code loads the following form which is inside a modal component.</p> <pre><code>&lt;template&gt; &lt;div class="errors"&gt;&lt;/div&gt; &lt;form method="POST" @submit.prevent="updateCountry"&gt; &lt;div class="form-group"&gt; &lt;label for="name"&gt;Id:&lt;/label&gt; &lt;input type="text" name="id" id="countryId" class="inputText" autofocus="autofocus" placeholder="1" readonly="readonly" v-model="formData.countryId" /&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" name="name" id="name" class="inputText" placeholder="Eg. India" required="required" v-model="formData.name" /&gt; &lt;div class="error"&gt; &lt;span v-if="formErrors['name']" class="text-danger" &gt; {{ formErrors['name'] }} &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="code"&gt;Code:&lt;/label&gt; &lt;input type="text" name="code" id="code" class="inputText" placeholder="Eg. IND" required="required" v-model="formData.code" /&gt; &lt;div class="error"&gt; &lt;span v-if="formErrors['code']" class="text-danger" &gt; {{ formErrors['code'] }} &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="currency_name"&gt;Currency Name:&lt;/label&gt; &lt;input type="text" name="currency_name" id="currency_name" class="inputText" placeholder="Eg. Indian National Rupee" required="required" v-model="formData.currency_name" /&gt; &lt;div class="error"&gt; &lt;span v-if="formErrors['currency_name']" class="text-danger" &gt; {{ formErrors['currency_name'] }} &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="currency_code"&gt;Currency Code:&lt;/label&gt; &lt;input type="text" name="currency_code" id="currency_code" class="inputText" placeholder="Eg. INR" required="required" v-model="formData.currency_code" /&gt; &lt;div class="error"&gt; &lt;span v-if="formErrors['currency_code']" class="text-danger" &gt; {{ formErrors['currency_code'] }} &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="display"&gt;Display:&lt;/label&gt; &lt;select name="display" id="display" class="selectText" required="required" v-model="formData.display" &gt; &lt;option value="Disabled" selected="selected"&gt;Disabled&lt;/option&gt; &lt;option value="Enabled"&gt;Enabled&lt;/option&gt; &lt;/select&gt; &lt;div class="error"&gt; &lt;span v-if="formErrors['display']" class="text-danger" &gt; {{ formErrors['display'] }} &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;button type="submit" class="button button--teal"&gt;Edit&lt;/button&gt; &lt;/form&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { formData: { countryId: '', name: '', code: '', currency_name: '', currency_code: '', display: '' }, formErrors: {}, allCountries: [] } }, ready: function() { this.fetchAllCountries(); }, methods: { notify: function(mType, mTitle, mMessage, nDelay) { $.iGrowl({ type: mType == 'success' ? 'success' : 'error', title: mTitle, message: mMessage, icon: mType == 'success' ? 'steadysets-checkmark !' : 'feather-cross', delay: nDelay, animShow: 'bounceInRight', animHide: 'bounceOutRight' }); }, fetchAllCountries: function() { $.get('/api/all-countries', function(countries) { this.allCountries = countries; }.bind(this), 'json'); }, updateCountry: function(e) { $('.button').addClass('button--disabled') .html('&lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt; Editing...'); $(document).find('i.fa.fa-spinner.fa-spin').show(); this.$http .post('/admin/settings/update-country/' + this.formData.countryId, this.formData) .then((result) =&gt; { var res = result.data; $('.button').removeClass('button--disabled').html('Edit'); $(document).find('i.fa.fa-spinner.fa-spin').hide(); // 3000 is the number of seconds before disappearing this.notify(res.status, res.title, res.message, 3000); }, (err) =&gt; { $('.button').removeClass('button--disabled').html('Edit'); $(document).find('i.fa.fa-spinner.fa-spin').hide(); if ( err.status === 422 ) { var errors = err.data; this.formErrors = errors; } }); return false; } } } &lt;/script&gt; </code></pre> <p>What is happening is, whenever I submit the above form, it gets submitted with no values at all. Meaning I get an empty string for all the fields above. But, if I go to each field manually, it gets submitted with proper field values.</p> <p>I want that whenever a user just clicks on the submit button, the values should get updated. Meaning the user should not be forced to click on every field, so that vue can recognize it.</p> <p><strong>EDIT 1:</strong></p> <p>This is how I call the modal:</p> <pre><code>@section('pageScripts') &lt;script&gt; $('#editCountryModal').on('show.bs.modal', function(e) { var link = $(e.relatedTarget); var id = link.data('country-id'); var name = link.data('country-name'); var code = link.data('country-code'); var currency_name = link.data('country-currency-name'); var currency_code = link.data('country-currency-code'); var display = link.data('country-display'); var modal = $(this); modal.find('.modal-title').html('Edit Country: ' + name); modal.find('.modal-body #countryId').val(id); modal.find('.modal-body #name').val(name); modal.find('.modal-body #code').val(code); modal.find('.modal-body #currency_name').val(currency_name); modal.find('.modal-body #currency_code').val(currency_code); modal.find('.modal-body #display').val(display); }); &lt;/script&gt; @endsection </code></pre> <p><strong>Bottom line question:</strong> How do I submit the default values (loaded in the modal window) of the form if the user just clicks on the submit button ?</p> <p>Any help is highly appreciated. Thanks.</p> </div>

vue+element-ui怎么把表单数据和图片一起提交到后端呢?能获取图片大小和名称么?

vue+element-ui怎么把表单数据和图片一起提交到后端呢?能获取图片大小和名称么?

vue的渲染问题,渲染的时候说该列表的某个属性是null,但内容还是可以渲染出来。求优化。

问题是这样的,我在**vue**的**js data()**逻辑里命名了一个对象或者数组:**orderList:[]**,然后在**created()**的时候通过**axios**异步获取数据给它。 前端**template**里绑定该数组对象里的某些属性名,控制台console会报红色的该属性是**null**,但是前端可以显示内容。直接贴代码吧。 这是js: ``` data () { return { orderList: {} } }, created () { this.axios.get(thisUrl) .then(res => { res = res.data if(res.code === 0) { this.orderList = res.data console.log('orderList:', this.orderList); } else { this.$notify(res.msg) } }) .catch(err => { this.$notify('ERR: 获取订单详情失败,请稍后重试!') }) }, ``` 这是前端template: ``` <span class="fontEllipsis fontColor">{{orderList.item_goods.summary}}</span> ``` 报错截图: ![图片说明](https://img-ask.csdn.net/upload/201907/12/1562923224_657764.png) 现在想到的两种方法就是: 1、orderList写成: ``` orderList:{ item_goods:{ summary } } ``` 这样的缺点是麻烦,而且后端的属性名要是一改其实这里还得改。 2、直接判断length: ``` <span v-if="orderList.length" class="fontEllipsis fontColor">{{orderList.item_goods.summary}}</span> ``` 这样吧。。。又有页面样式的跳动,毕竟vif要重新渲染的。而且万一不是数组呢?万一后端给我个null呢? 问题和自己的两个解决方法就在这里,希望可以抛砖引玉,各位大神能给个更好的方法?本人有点强迫症,而且Android还好,但在ios系统会报错导致逻辑走不通页面不能显示。求指点。

vue 选中input中搜索按钮弹框中数据如何绑定到input上

![图片说明](https://img-ask.csdn.net/upload/201903/29/1553836847_447320.png)![图片说明](https://img-ask.csdn.net/upload/201903/29/1553836858_133883.png) ``` <el-form-item> 产品代码 <el-input title="产品搜索帮助" size="mini" placeholder="请输入产品代码" ></el-input> <el-button icon="el-icon-search" @click="dialogFormVisible2 = true" circle ></el-button> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-new" @click="getList">查询</el-button> </el-form-item> ``` ``` <el-dialog title="整车主文件搜索帮助" :visible.sync="dialogFormVisible2"> <el-form > <el-form-item> 产品代码<el-input id="carId"></el-input> <!-- 车型代码<el-input v-model="input"></el-input> --> 最大限制数量<el-input type="number" id="carNum" ></el-input> </el-form-item> <el-form-item prop="busType"> <el-radio v-model="radio" label="1">模糊查询</el-radio> </el-form-item> <el-form-item> <el-button type="primary" @click="getList2" >查询</el-button> </el-form-item> <div class="table"> <!-- 产品代码 --> <el-table height="350" :data="tableData2"> <el-table-column prop="VProductCode" label="产品代码"></el-table-column> <el-table-column prop="VProductName" label="产品名称"></el-table-column> </el-table> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button> <el-button @click="dialogFormVisible2 = false">取 消</el-button> </div> </el-dialog> ```

请求地址参数的问题,在请求地址栏有个参数怎么获取?

请求地址参数的问题,就是我在一个解析网站上解析B站的视频,他是向一个借口以post方式请求的数据但是请求地址里面有个callback参数,这个参数不知道怎么获取的,查过不是从服务器上面获取的,应该是从本地JS生成的,但是找不到具体的JS代码??? ![图片说明](https://img-ask.csdn.net/upload/201910/24/1571909776_695438.png) 解析网站网址:https://pv.vlogdownloader.com<br> 接口请求地址:https://pv.vlogdownloader.com/api.php?callback=jQuery112403211666080804736_1571907483200

关于Vue中v-for遍历的问题

如图: 使用semanticUI 的tab组件,要实现这个tab切换效果, ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580301878_788972.png) 在静态页面可以切换: 这是原始代码 ``` $('.menu .item').tab(); ---------------------------------- <div class="ui top attached tabular menu"> <a class="active item" data-tab="first">First</a> <a class="item" data-tab="second">Second</a> <a class="item" data-tab="third">Third</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> <div class="ui bottom attached tab segment" data-tab="second"> Second </div> <div class="ui bottom attached tab segment" data-tab="third"> Third </div> ``` 我想要实现 的效果是 使用 vue 获取到后台传递过来的tab标签里的分类数据, 点击标签,下方自动切换到对应的div. 自己的代码: ``` <div id="workArea" class="m-container m-padded-tb-big"> <div class="ui top attached tabular menu"> <a v-for="c in categories" class="item" data-tab="first">{{ c.name}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> </div> ``` 达到这个效果 ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580302472_363102.png) 我想请问一下这个下面的div 要怎么写才能实现这样一个vue切换效果呢 下面是全部代码: ``` <!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>工具</title> <link rel="stylesheet" type="text/css" href="../../static/css/me.css" th:href="@{/css/me.css}"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body style="background: #439B78;"> <div style="height: 20px;"></div> <div id="workArea" class="m-container m-padded-tb-big"> <div class="ui top attached tabular menu"> <a v-for="c in categories" class="active item" data-tab="first">{{ c.name}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> </div> <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script> <script src="../../static/js/vue.min.js" th:src="@{/js/vue.min.js}"></script> <script src="../../static/js/axios.min.js" th:src="@{/js/axios.min.js}"></script> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <script type="text/javascript"> $(function(){ var data1 = { uri: 'forekit', categories: [] }; var vue = new Vue({ el: '#workArea', data: data1, mounted:function(){ this.load(); }, methods:{ load: function() { var url = this.uri; axios.get(url).then(function(response){ vue.categories = response.data; }); } } }); $('.menu .item').tab(); }); </script> </body> </html> ```

vue-awesome-swiper 手势缩放无效

问题描述: 想在vue项目中使用vue-awesome-swiper实现相册查看功能,测试的时候发现使用写死的图片src 时手势缩放没有问题,但是图片src集合换到从后台获取到再赋值的,手势缩放就不起作用了,不知道是什么原因。 用的vue template, 后台获取到的数据已经渲染到dom中,手机上测试切换没有问题,双击放大也可以,就是手势缩放或者双击放大后图片不能拖拽移动查看(用写死的图片src是可以的)。 vue项目依赖或版本: ``` "devDependencies": { "axios": "^0.15.3", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.12.1", "less": "^2.7.3", "less-loader": "^4.0.5", "lodash": "^4.17.4", "postcss-px2rem": "^0.3.0", "vue-lazyload": "^1.2.6" }, "dependencies": { "fastclick": "^1.0.6", "leancloud-realtime": "^4.0.0-alpha.3", "leancloud-realtime-plugin-typed-messages": "^3.0.0", "leancloud-storage": "^3.4.2", "mint-ui": "^2.2.11", "moment": "^2.19.1", "vee-validate": "^2.0.0", "vue": "^2.5.13", "vue-awesome-swiper": "^2.6.7", "vue-resource": "^1.3.4", "vue-router": "^3.0.1", "vuex": "^3.0.1" } ``` 问题出现的环境背景及自己尝试过哪些方法: 试过使用另一个图片预览插件 [PhotoSwipe](http://photoswipe.com/ ""):PhotoSwipe,这个插件体验感比较好,但是插件需要预先知道图片的宽高,这个目前还没有时间研究。 相关代码: ``` <style> .viewImg .swiper-slide img { width: 100%; } </style> <template> <div class="viewImg" > <a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="img in images" :key="img.id"> <div class="swiper-zoom-container"> <img :data-src="img.smallSizeUrl" class="swiper-lazy"> </div> </swiper-slide> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> import 'swiper/dist/css/swiper.css' ; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return {swiperOption: { allowTouchMove: true, width: window.innerWidth, notNextTick: false, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper loadPrevNext: true, lazy: { loadPrevNext: true, }, lazyLoading : true, lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。 zoom: true, grabCursor: true, // 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同) pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 // this.swiper.slideTo(0, 1, false); }, props: { images: { required: true } }, methods:{ closeViewer: function(){ this.viewImg = false; } } } </script> ``` 我期待的结果是什么?实际看到的错误信息又是什么: 需要实现流畅的相册查看功能,支持预加载、流畅切换以及手机中手势缩放查看。 [vue-awesome-swiper 的demo](https://surmon-china.github.io/vue-awesome-swiper/ "")里可以看到都可以满足目前的主要需求,但是我在项目中出现了以上问题,求助。

【Vue问题在线等】Vue 怎么判断 v-if 中是否有某个指定的值呢

Vue 的复选框有多个值,需要根据选择的值来显示和隐藏某些组件,我的思路是用 v-if 判选中数组中有某个值,但是一直不生效,怎么处理呢?

el-select的change事件,如何传递多个值?

模板: ```html <el-select @change="getColumn" v-model="selectedData.id"> <el-option v-for="item in columnList" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> ``` 数据: ```javascript data(){ columnList:[{ id:1, name:'姓名', type:1 },{ id:2, name:'年龄', type:2 }] } ``` 需求: 在getColumn方法中,希望能获得选中值的type,但是selectedData.id绑定的值只能是id,不能是对象,所以不能通过把value设置为item的方式传递,有其他解决方案吗?

使用vuex,更新了stores中的state,为何在视图上没有更新体现呢?

vue小白一枚来求解,代码是这样的 **组件.vue** ``` <template> <div class="top-ad-section" v-bind:class="{ show: isShowAdStatus }"></div> </template> <script> export default { mounted() { setTimeout(() => { console.log(this.$store.getters.getTopAdStatus, 'before lllll'); this.$store.dispatch('toggleTopAd'); console.log(this.$store.getters.getTopAdStatus, 'after'); }, 200); }, computed: { isShowAdStatus() { return this.$store.getters.getTopAdStatus; } } }; </script> ``` **这段代码要实现的功能是:** 在组件加载200ms后改变store中的state的值,使用this.$store.dispatch('toggleTopAd')来改变,这个值可以用this.$store.getters.getTopAdStatus取到,这时候打印出的值是正确的state里的值,可是并没有体现在视图里,不知道是哪里写的有问题了 小白一枚,求大神指点。 以前写react的时候主要用mobx做状态管理,感觉vuex的状态管理至少在形式上是跟redux更接近的?

ajax请求成功后返回的数据是个页面,怎么渲染出这个页面?react写的项目,做支付接口。

ajax请求成功后返回的数据是个页面,怎么渲染出这个页面?react写的项目,做支付接口。

Ant Design的FormItem 在报错的前提下无法对initialValue赋值

![图片说明](https://img-ask.csdn.net/upload/201709/02/1504341101_414958.png) 如上图所示,基于镜像那一列后面的input输入框个选择的button是封装的一个组件,input显示的内容通过Redux获取,且input为ReadOnly并且不能为空,上面的情况是在测试过程中,进入这个页面直接点击提交,会因为required属性报错,然后在报错的状态下改变Redux值赋给Input但是initialValue却拿不到赋值。报错状态不能消失。前提在正常操作流程下是对的。

如果能重来,我不会选择北漂——初见北京

一个人走的路

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

2020年大厂Java面试前复习的正确姿势(800+面试题答案解析)

前言 个人觉得面试也像是一场全新的征程,失败和胜利都是平常之事。所以,劝各位不要因为面试失败而灰心、 丧失斗志。也不要因为面试通过而沾沾自喜,等待你的将是更美好的未来,继续加油! 本篇分享的面试题内容包括:Java、MyBatis、ZooKeeper、Dubbo、Elasticsearch、Redis、MySQL、Spring、SpringBoot、SpringCloud、RabbitMQ...

抖音上很火的时钟效果

反正,我的抖音没人看,别人都有几十万个赞什么的。 发到CSDN上来,大家交流下~ 主要用到原生态的 JS+CSS3。 具体不解释了,看注释: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit...

记录下入职中软一个月(外包华为)

我在年前从上一家公司离职,没想到过年期间疫情爆发,我也被困在家里,在家呆着的日子让人很焦躁,于是我疯狂的投简历,看面试题,希望可以进大公司去看看。 我也有幸面试了我觉得还挺大的公司的(虽然不是bat之类的大厂,但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有),最后选择了中软,我知道这是一家外包公司,待遇各方面甚至不如我的上一家公司,但是对我而言这可是外包华为,能...

又出事了?网站被攻击了?高中生?

北京时间2020年3月27日9点整,如往常一样来到公司,带开电脑,正准备打开Github网站看一会源代码,再开始手头的工作。哟吼,一直打不开,一直出现如下页面: 我想很多网友也尝到了甜头,各大技术群炸开了锅,据网友反馈有攻击者正在发起大规模的中间人挟持,京东和Github等网站等网站都受到了影响。 什么是中间中间人挟持呢? 简而言之,就是攻击者在数据网络传输的过程中,截获传输过程中的数据并篡改...

培训班出来的人后来都怎么样了?(二)

接着上回说,培训班学习生涯结束了。后面每天就是无休止的背面试题,不是没有头脑的背,培训公司还是有方法的,现在回想当时背的面试题好像都用上了,也被问到了。回头找找面试题,当时都是打印下来天天看,天天背。 不理解呢也要背,面试造飞机,上班拧螺丝。班里的同学开始四处投简历面试了,很快就有面试成功的,刚开始一个,然后越来越多。不知道是什么原因,尝到胜利果实的童鞋,不满足于自己通过的公司,嫌薪水要少了,选择...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

工作八年,月薪60K,裸辞两个月,投简历投到怀疑人生!

近日,有网友在某职场社交平台吐槽,自己裸辞两个月了,但是找工作却让自己的心态都要崩溃了,全部无果,不是已查看无回音,就是已查看不符合。 “工作八年,两年一跳,裸辞两个月了,之前月薪60K,最近找工作找的心态崩了!所有招聘工具都用了,全部无果,不是已查看无回音,就是已查看不符合。进头条,滴滴之类的大厂很难吗???!!!投简历投的开始怀疑人生了!希望 可以收到大厂offer” 先来看看网...

我把华为小米年报放一起,发现华为才是真·手机公司,小米确实不靠卖手机赚钱...

郭一璞 发自 凹非寺量子位 报道 | 公众号 QbitAI国产手机界的两大玩家,华为&amp;小米,昨天在同一天前后脚发布了2019年财报。同行冤家,发财报也碰在了同一天。那我们就对比...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

97年世界黑客编程大赛冠军作品(大小仅为16KB),惊艳世界的编程巨作

这是世界编程大赛第一名作品(97年Mekka ’97 4K Intro比赛)汇编语言所写。 整个文件只有4095个字节, 大小仅仅为16KB! 不仅实现了3D动画的效果!还有一段震撼人心的背景音乐!!! 内容无法以言语形容,实在太强大! 下面是代码,具体操作看最后! @echo off more +1 %~s0|debug e100 33 f6 bf 0 20 b5 10 f3 a5...

不要再到处使用 === 了

我们知道现在的开发人员都使用 === 来代替 ==,为什么呢?我在网上看到的大多数教程都认为,要预测 JavaScript 强制转换是如何工作这太复杂了,因此建议总是使用===。这些都...

什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站?00后的世界我不懂!

A站 AcFun弹幕视频网,简称“A站”,成立于2007年6月,取意于Anime Comic Fun,是中国大陆第一家弹幕视频网站。A站以视频为载体,逐步发展出基于原生内容二次创作的完整生态,拥有高质量互动弹幕,是中国弹幕文化的发源地;拥有大量超粘性的用户群体,产生输出了金坷垃、鬼畜全明星、我的滑板鞋、小苹果等大量网络流行文化,也是中国二次元文化的发源地。 B站 全称“哔哩哔哩(bilibili...

十个摸鱼,哦,不对,是炫酷(可以玩一整天)的网站!!!

文章目录前言正文**1、Kaspersky Cyberthreat real-time map****2、Finding Home****3、Silk – Interactive Generative Art****4、Liquid Particles 3D****5、WINDOWS93****6、Staggering Beauty****7、Ostagram图片生成器网址****8、全历史网址*...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

毕业5年,我熬夜整理出了这50个优质的电子书网站,吐血推荐!

大家好,我是武哥,最近经常有小伙伴问我要电子书,都什么年代了,还找不到电子书吗?如果要说原因,那就是你还没遇到武哥我(手动滑稽~)!我今天把这么多年我经常看的电子书网站整理一下给大家,基本上能解决大家的需求。不管是在校生还是已经工作了,相信肯定对你有所帮助! 1.鸠摩搜书 首先给大家推荐的网站是:鸠摩搜书 地址:https://www.jiumodiary.com/ 这个网上非常棒,上面有很多优质...

MySQL性能优化(五):为什么查询速度这么慢

前期回顾: MySQL性能优化(一):MySQL架构与核心问题 MySQL性能优化(二):选择优化的数据类型 MySQL性能优化(三):深入理解索引的这点事 MySQL性能优化(四):如何高效正确的使用索引 前面章节我们介绍了如何选择优化的数据类型、如何高效的使用索引,这些对于高性能的MySQL来说是必不可少的。但这些还完全不够,还需要合理的设计查询。如果查询写的很糟糕,即使表结构再合理、索引再...

大厂的 404 页面都长啥样?最后一个笑了...

每天浏览各大网站,难免会碰到404页面啊。你注意过404页面么?猿妹搜罗来了下面这些知名网站的404页面,以供大家欣赏,看看哪个网站更有创意: 正在上传…重新上传取消 腾讯 正在上传…重新上传取消 网易 淘宝 百度 新浪微博 正在上传…重新上传取消 新浪 京东 优酷 腾讯视频 搜...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

总结了Mybatis,原来知识点也没多少嘛

看完这篇Mybatis,感觉你三天就会用了。

爬虫(101)爬点重口味的

小弟最近在学校无聊的很哪,浏览网页突然看到一张图片,都快流鼻血。。。然后小弟冥思苦想,得干一点有趣的事情python 爬虫库安装https://s.taobao.com/api?_ks...

疫情后北上广深租房价格跌了吗? | Alfred数据室

去年3月份我们发布了《北上广深租房图鉴》(点击阅读),细数了北上广深租房的各种因素对租房价格的影响。一年过去了,在面临新冠疫情的后续影响、城市尚未完全恢复正常运转、学校还没开学等情况下...

面试官给我挖坑:a[i][j] 和 a[j][i] 有什么区别?

点击上方“朱小厮的博客”,选择“设为星标”后台回复&#34;1024&#34;领取公众号专属资料本文以一个简单的程序开头——数组赋值:int LEN = 10000; int[][] ...

在拼多多上班,是一种什么样的体验?我心态崩了呀!

之前有很多读者咨询我:武哥,在拼多多上班是一种什么样的体验?由于一直很忙,没抽出时间来和大家分享。上周末特地花点时间来写了一篇文章,跟大家分享一下拼多多的日常。 1. 倒时差的作息 可能很多小伙伴都听说了,拼多多加班很严重。这怎么说呢?作息上确实和其他公司有点区别,大家知道 996,那么自然也就能理解拼多多的“11 11 6”了。 所以当很多小伙伴早上出门时,他们是这样的: 我们是这样的: 当...

又一起程序员被抓事件

就在昨天互联网又发生一起让人心酸的程序员犯罪事件,著名的百度不限速下载软件 Pandownload PC 版作者被警方抓获。案件大致是这样的:软件的作者不仅非法盗取用户数据,还在QQ群进...

瑞德西韦重症用药结果再曝光,上百名重症一周内好转,股价大涨19%

郭一璞 发自 凹非寺量子位 报道 | 公众号 QbitAI期盼已久的瑞德西韦临床数据,现在“偷跑”了。在芝加哥大学医学院的临床试验中,125名病人参与,大部分人都已经出院,其中只有2名病...

应聘3万的职位,有必要这么刁难我么。。。沙雕。。。

又一次被面试官带到坑里面了。面试官:springmvc用过么?我:用过啊,经常用呢面试官:springmvc中为什么需要用父子容器?我:嗯。。。没听明白你说的什么。面试官:就是contr...

相关热词 c# cad插入影像 c#设计思想 c#正则表达式 转换 c#form复制 c#写web c# 柱形图 c# wcf 服务库 c#应用程序管理器 c#数组如何赋值给数组 c#序列化应用目的博客园
立即提问