Question

我想在单选按钮上选择默认设置。这是代码：

import React, { Component } from 'react'
import { Media, Player, controls } from 'react-media-player'

const { CurrentTime, SeekBar, Duration, Volume, PlayPause, MuteUnmute } = controls
let panner = null

class AudioPlayer extends Component {

  componentDidMount() {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)()
    panner = audioContext.createPanner()

    panner.setPosition(0, 0, 1)
    panner.panningModel = 'equalpower'
    panner.connect(audioContext.destination)

    const source = audioContext.createMediaElementSource(this._player.instance)
    source.connect(panner)
    panner.connect(audioContext.destination)
  }

  _handlePannerChange = ({ target }) => {
    const x = +target.value
    const y = 0
    const z = 1 - Math.abs(x)
    panner.setPosition(x, y, z)
  }

  render() {
    return (
      <div>
        { typeof window !== 'undefined' && Media && 
          <Media>   
            <div>
              <Player
                ref={c => this._player = c}
                src={this.props.src}
                useAudioObject
              />
              <section className="media-controls">
                <div className="media-title-box">
                  <PlayPause className="media-control media-control--play-pause"/>
                  <div className="media-title-content">
                    <div className="media-title">{ this.props.mediaTitle }</div>
                    <div className="media-subtitle">{ this.props.mediaSubtitle }</div>
                  </div>
                </div>
                <div className="media-controls-container">
                  <CurrentTime className="media-control media-control--current-time"/>
                  <SeekBar className="media-control media-control--volume-range"/>
                  <Duration className="media-control media-control--duration"/>
                </div>
                <div className="media-sound-controls">
                  <MuteUnmute className="media-control media-control--mute-unmute"/>
                  <Volume className="media-control media-control--volume"/>
                </div>            
              </section>
            </div>
          </Media>
        }
      </div>
    )
  }
}

export default AudioPlayer

我遵循了this的答案。

虽然看到正在打印的每个项目的<ul v-for="p in myPhotos"> <li> <div class="row"> <div class="col-sm-6"> <div> Visibility: {{p.visible}} </div> <br> <br> <strong>Visiblity setting</strong><br> <input type="radio" v-model="p.visible" name="visibility" value="all" :checked="p.visible == 'all'"> All <br> <input type="radio" v-model="p.visible" name="visibility" value="fav" :checked="p.visible == 'fav'"> My favorites <br> <input type="radio" v-model="p.visible" name="visibility" value="none" :checked="p.visible == 'none'"> No one </div> <div class="col-sm-6"><img class="img-responsive myphotos" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div> </div> </li> </ul>，但未按预期检查默认值。

这是创建组件时从服务器收到的Visibility：

myPhotos

这里有什么问题，我该如何解决？

Answer 1

在您尝试的代码中，只有一个具有相同名称visibility的单选按钮组，在我们的情况下，我们需要3个组，因此我们需要3个不同的名称，为此我们必须添加i索引到我们的v-for循环，并将每个组名与该索引绑定，例如:name="'visibility'+i"

new Vue({
  el: '#app',
  data: {
    myPhotos: [{
        "_id": 1,
        "imgId": "12710.png",
        "visible": "all"
      },
      {
        "_id": 2,
        "imgId": "62818.png",
        "visible": "fav"
      },
      {
        "_id": 3,
        "imgId": "36740.png",
        "visible": "inv"
      }
    ]

  },
  methods: {
    change(e) {
      //   console.log(e.target.id)
      e.target.disabled = true
    }

  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul v-for="p,i in myPhotos">
      <li>
        <div class="row">

          <div class="col-sm-6">
            <div>
              Visibility: {{p.visible}}
            </div>

            <br>
            <br>
            <strong>Visiblity setting</strong><br>
            <input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="all" :checked="p.visible == 'all'"> All <br>
            <input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="fav" :checked="p.visible == 'fav'"> My favorites <br>
            <input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="none" :checked="p.visible == 'none'"> No one

          </div>
          <div class="col-sm-6"><img class="img-responsive myphotos" /> </div>
        </div>


      </li>

    </ul>
  </div>
</body>

选中的Vue.js默认单选按钮不起作用

1 个答案: