Vue是否基于复选框选中的对象列表更新对象?

时间:2018-09-12 10:06:21

标签: javascript vue.js vuejs2

保存一些使用主数组但被添加到另一个对象的数组会有些麻烦。

我有一个距离列表(数字数组)。

string1 = "a,b:i,c,d:i,e,f,g,h"
string2 = "a,b,c,d"
string3 = "a,b,c,d,e,f:i"

def print_strange_rule(string):
    str_list = string.split(",")
    colon_i_list = []
    non_colon_i_list = []

    token = ""
    for piece in str_list:
        if ":i" not in piece:
            token += piece + ","
        else:
            colon_i_list.append(token + piece[:-2])
            token = ""
    non_colon_i_list.append(token[:-1])

    print colon_i_list
    print non_colon_i_list

print_strange_rule(string1)
print_strange_rule(string2)
print_strange_rule(string3)

在同一视图中,我可以添加一些新距离

private FirstFragment firstFragment = FirstFragment.newInstance();
private SecondFragment secondFragment= SecondFragment.newInstance();
private ThirdFragment thirdFragment = ThirdFragment.newInstance();

navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.menu_dialer:
                    changeFragment(firstFragment, "firstFragment");
                    return true;
                case R.id.menu_email:
                    changeFragment(secondFragment, "secondFragment");
                    return true;
                case R.id.menu_map:
                    changeFragment(thirdFragment, "thirdFragment");
                    return true;
            }
            return false;
        }
    });

public void changeFragment(Fragment fragment, String tagFragmentName) {

    FragmentManager mFragmentManager = getSupportFragmentManager();
    FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();

    Fragment currentFragment = mFragmentManager.getPrimaryNavigationFragment();
    if (currentFragment != null) {
        fragmentTransaction.detach(currentFragment);
    }

    Fragment fragmentTemp = mFragmentManager.findFragmentByTag(tagFragmentName);
    if (fragmentTemp == null) {
        fragmentTemp = fragment;
        fragmentTransaction.add(R.id.content, fragmentTemp, tagFragmentName);
    } else {
        fragmentTransaction.attach(fragmentTemp);
    }

    fragmentTransaction.setPrimaryNavigationFragment(fragmentTemp);
    fragmentTransaction.setReorderingAllowed(true);
    fragmentTransaction.commitNowAllowingStateLoss();
}

这有效,将距离添加到数组中。 将距离添加到ul-list之后,我还想将距离添加到另一个数组内的每个Car的复选框。

<ul>
    <li v-for="(distance, index) in distances">
        <a>{{ distance }} km</a>
    </li>
</ul>

工作功能:

<input type="number" v-model="newDistance" /><button @click="addDistance(newDistance)">+</button>

以及增加距离的功能:

<article v-for="car in cars">
    <div v-for="(distance, index) in distances">
        <div @click="updateCar(car, product.distances)">
            <input :id="car.slug+index" :name="car.slug" type="checkbox" :checked="checkDistances(surface, car)" />
            <label :for="car.slug+index">{{ distance }} km</label>
        </div>
    </div>
</article>

这是UpdateCar函数

checkDistances(distance, car) {
    var self = this;
    if(typeof car.distances === 'object') {
        if(typeof car.distances[self.form.slug] !== 'undefined') {
            return (car.distances[self.form.slug].includes(distance))
        }
    }
    return false;
},

两个控制台日志都显示相同的阵列。

总是返回所有位于“距离”数组中的项目,而不仅仅是返回输入字段。

我想要的是,当我选中一个复选框时,我可以更新汽车,因此它只会返回所选择的距离。

1 个答案:

答案 0 :(得分:0)

似乎您只是根据checkDistances的结果切换复选框的状态,而不是将其存储在任何地方。您的示例的组织结构对我而言不是100%清楚的,但是您可能需要遵循以下原则:

// In your template
<input
    :id="car.slug+index"
    :name="car.slug"
    type="checkbox"
    :checked="distance in car.distances"
    @click="addDistanceToCar(distance, car)" />

// In your methods:
addDistanceToCar(distance, car) {
    car.distances.push(distance)
}