选择某些单选选项时需要文本区域

Question

我目前正在为我的网站开发反馈表，并在用户希望离开平台时征求他们的反馈意见。该项目正在使用 VueJS 开发。 我有用于选择离开原因的单选复选框，并在下方有一个文本区域以提供更多详细信息。默认情况下，提供反馈时不需要文本区域详细信息，但我想在用户选择“其他”作为原因时进行一些输入。

我对 Vue 比较陌生，并且尝试过使用 v-if 进行条件渲染，但我在网上找不到任何关于扩展此逻辑以在选择某个选项时使字段成为必需的任何内容。

<div class="eight wide field">

              <div class="ui form">
                <div class="grouped fields">
                  <label>Reason for leaving...</label>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('pricing')">
                      <input type="radio" name="example2" data-value="pricing" />
                      <label>too expensive.</label>
                    </div>
                  </div>
                  <div class="sub-field field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="example2" data-value="sub-option"/>
                      <label>I am moving to a cheaper platform.</label>
                    </div>
                  </div>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('platform_features')">
                      <input type="radio" name="example2" data-value="platform_features"/>
                      <label>missing the features I want.</label>
                    </div>
                  </div>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('another_platform')">
                      <input type="radio" name="example2" data-value="another_platform"/>
                      <label>I am moving to another platform.</label>
                    </div>
                  </div>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('no_longer_ppc')">
                      <input type="radio" name="example2" data-value="no_longer_ppc"/>
                      <label>I no longer run PPC ads.</label>
                    </div>
                  </div>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('no_results')">
                      <input type="radio" name="example2" data-value="no_results"/>
                      <label>I not getting any results.</label>
                    </div>
                  </div>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('dont_understand_ppc')">
                      <input type="radio" name="example2" data-value="dont_understand_ppc"/>
                      <label>I don't understand how to use .</label>
                    </div>
                  </div>

                  <div class="field">
                    <div class="ui radio checkbox" @click="setFeedback('other')">
                      <input type="radio" name="example2" data-value="other"/>
                      <label>Other (please explain further).</label>
                    </div>
                  </div>

                </div>
              </div>


              <textarea
                  v-model="feedback_details"
                  data-value="feedback_details"
                  class="feedback-textarea"   
              />

    sendFeedback() {
      // Establish Variables
      var self = this;

      var feedback_data = {
        feedback: self.feedback,
        feedback_details: self.feedback_details
      };

      var endpoint = window.ApiUrl + "/subscriptions/feedback";
      console.log("Endpoint: " + endpoint);

      // Send Api request and process response
      self.sendFeedbackPostRequest(endpoint, feedback_data).then(
        function(response) {
          console.log("---- Logging API Response ----");
          console.log(response);
        },
        function(error) {
          console.log("---- Logging API Error Response ----");
          console.log(error);
        }
      );

      return false;
    },

    sendFeedbackPostRequest(endpoint, postdata) {
      return new Promise((resolve, reject) => {
        // Define Self
        var self = this;
        // Sending Api Request
        self.$http
          .post(endpoint, postdata)
          .then(
            function(response) {
              resolve(response);
            },
            function(error) {
              reject(error);
            }
          )
          .finally(function() {
            console.log("Run account deletion here...");
            // self.deleteAccount();
          });
      });
    }
  }
};

我希望在选择“其他”作为用户反馈选项时需要 textarea。

Answer 1

只需使用v-bind 或: 简写为readonly 属性，例如

<textarea
    v-model="feedback_details"
    data-value="feedback_details"
    class="feedback-textarea"
    v-bind:required="shouldTextareaBeRequired"
/>

然后，计算属性shouldTextareaBeRequired可以根据setFeedback()方法设置的值返回一个布尔值：如果值为“Other”，则返回true，否则返回false。根据您的问题，不清楚您是如何存储用户反馈的，但它可能作为组件数据的一部分存储在某处。