小编Jef*_*yan的帖子

Vuejs 2,VUEX,编辑数据时的数据绑定

我有一个用户个人资料部分,我试图让用户编辑他们的信息.我正在使用vuex存储用户配置文件数据并将其拉入表单.编辑表单位于userProfile组件的子组件中 - 加载数据保存将其提交给VUEX.

所以我可以使用VUEX中的数据填充表单,但是只要我更改表单中的任何值,它就会更改父组件中的值.

在保存表单之前,我没有对VUEX进行更改,因此这意味着数据绑定到VUEX的两个方向.我觉得这是不可能的.在这种情况下,不希望由于用户是否更改某些数据,然后导航而不实际点击"保存",数据仍然是VUEX已更改.

注意,这是一个简化的例子.我实际上使用路由器视图来加载子组件,或者我将通过道具传递数据.我已经测试过直接加载编辑配置文件组件,就像它在下面一样,我有同样的问题.

请参阅下面的代码,我找不到为什么数据被发送回商店.任何帮助是极大的赞赏.

在父级中,我设置检索用户数据,如下所示:

<template>
    <div class="content">
        <h1>{{getUserDetails.firstname}} {{getUserDetails.lastname}} </h1>
        <edit-profile></edit-profile>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex';
    import EditProfile from './Edit.vue';

    export default {
        data() {
            return {
                // data
            }
        },
        created () {
            this.fetchData();
        },
        components: {
            EditProfile:EditProfile
        },
        computed: mapGetters([
            'getUserDetails'
        ]),
        methods: {
            fetchData: function () {
                var _this = this;
                // ajax call - then
                _this.$store.commit('setData', {
                    name: 'userDetails',
                    data: response.data.data.userDetails
                });
            }
        }
    }
</script>
Run Code Online (Sandbox Code Playgroud)

这会加载结果并将它们存储在商店中,并且效果很好.

我的商店有这个: …

data-binding vue.js vue-router vuex vuejs2

8
推荐指数
1
解决办法
5568
查看次数

PhantomJs点击链接或运行页面功能

我只是习惯了PhantomJs,到目前为止它非常酷.

我正在尝试抓取网站并获取有关网站上产品的数据.每个产品页面都会加载产品的默认颜色.单击颜色样本时,它会通过运行函数来交换新颜色.每个可点击的颜色样本元素如下所示:

<input type="image" id="swatch_0" onclick="pPage.getColor(0);" src="http://www.site.com/img50067.jpg">
Run Code Online (Sandbox Code Playgroud)

getColor更新该颜色的缩略图和价格.每个可用颜色(swatch_0,swatch_1等)的id增量以及传递给getColor增量的参数.我想用PhantomJs迭代每种颜色并为每个颜色提取相关数据.

我已经加载了页面,加载了jQuery,并且可以为初始加载的颜色提取数据,但似乎没有任何东西可以让我执行点击事件.

这是我正在尝试的:

page.evalaute(function){
  var selection = $('#confirmText').text(); // name of the color
  var price = $('#priceText').text();       // price for that color

  console.log('Price is: ' + price);
  console.log('Selection is: ' + selection);
  console.log($('#swatch_1'));

  $('#swatch_1').trigger("click");

  selection = $('#selectionConfirmText').text();
  price = $('#priceText').text();
  console.log('Price is: ' + price);
  console.log('Selection is: ' + selection);

}
Run Code Online (Sandbox Code Playgroud)

这给了我:

console> Price is: $19.95
console> Selection is: blue
console> [Object Object]
console> TypeError: 'undefined' is not and object  // repeating until …
Run Code Online (Sandbox Code Playgroud)

javascript jquery phantomjs

7
推荐指数
1
解决办法
1万
查看次数

CasperJs在嵌套循环中单击链接

我正在尝试使用PhantomJS/CasperJS来抓取网页.我花了最近几天阅读文档,并在网上搜索,但我被困住了.

我正在抓取的页面显示了三个级别的链接 - 年,月和日.当您选择年,月和日时,#count div中会显示一个计数.此外,月份实际上是改变#imageLoad div中图像的输入(我不需要).

<div id="years">
    <span class="year">2010</span>
    <span class="year">2011</span>
    <span class="year">2012</span>
    etc...
</div>  
<div id="months">
    <input type="image" class="month" src="jan_image.png" onclick="changepic('jan')" />
    <input type="image" class="month" src="feb_image.png" onclick="changepic('feb')" />
    <input type="image" class="month" src="mar_image.png" onclick="changepic('mar')" />
    etc...
</div>
<div id="days">
    <span class="day">1</span>
    <span class="day">2</span>
    <span class="day">3</span>
    etc...
</div>

<div id="imageLoad">
</div>
<div id="count">
</div>
Run Code Online (Sandbox Code Playgroud)

我正在尝试遍历链接并记录每年,几个月和几天的组合出现的计数.如您所见,月份是改变图片的输入.

我尝试过很多东西.我想做的主要是嵌套循环,循环遍历每组链接,随时点击它们.这是代码(我使用的是jQuery):

casper.start(link);

casper.then(function() {

    pageInfo =  this.evaluate(function(){
        values = [];
        for(var y = 0; y < $('#years').length; y++){
            year= $('#years span').get(y);
            $(year).click();

            for(var m = …
Run Code Online (Sandbox Code Playgroud)

javascript loops phantomjs casperjs

1
推荐指数
1
解决办法
7237
查看次数