Question

参考以下Plunkr：

https://plnkr.co/edit/zbOBDEaWvn8Tw0F0O9cy?p=preview

单选按钮已链接，因为单击“是”会同时选中两个“是”单选按钮，而选中“否”会同时选中两个“否”单选按钮。

在我的数据模型中，我有一个包含两行的数组：

terms: [
  {termBoolean: 'Yes'},
  {termBoolean: 'No'}
]

如何构造代码以使行不链接，并且可以一次检查一个“是”和一个“否”？

Answer 1

编辑：我的原始答案不正确。您的问题是由于您使用的Vue版本，即版本1.0.26。在Vue的版本1中，没有IO语法糖。而是通过特殊属性(term, index)访问index。我先前的答案不适用于此版本的Vue。

要修复您当前的代码，请进行以下更改：

$index

或者，升级到Vue2.x。如果您选择走这条路线，请查看migration guide。

Answer 2

export default class LinksScreen extends React.Component {
  static navigationOptions = {
    title: 'react chart',
  };

  render() {

      const data = [
          {
              month: new Date(2015, 0, 1),
              apples: 3840,
              bananas: 1920,
              cherries: 960,
              dates: 400,
          },
          {
              month: new Date(2015, 1, 1),
              apples: 1600,
              bananas: 1440,
              cherries: 960,
              dates: 400,
          },
          {
              month: new Date(2015, 2, 1),
              apples: 640,
              bananas: 960,
              cherries: 3640,
              dates: 400,
          },
          {
              month: new Date(2015, 3, 1),
              apples: 3320,
              bananas: 480,
              cherries: 640,
              dates: 400,
          },
      ]

      const colors = [ 'green', '#aa00ff', 'red', 'yellow' ]
      const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]
      const svgs = [
                  { onPress: () => console.log('apples') },
                  { onPress: () => console.log('bananas') },
                  { onPress: () => console.log('cherries') },
                  { onPress: () => console.log('dates') },
              ]

      return (
          <StackedAreaChart
              style={ { height: 200, paddingVertical: 16 } }
              data={ data }
              keys={ keys }
              colors={ colors }
              curve={ shape.curveNatural }
              showGrid={ false }
              svgs={ svgs }
              animate={true}
              animationDuration={300}
          />
      )
  }
}

编辑：认为您对索引和术语的排序错误。

在Vue.js中，如何取消链接单选按钮的数组？

2 个答案: