<v-container class="text-center hyp-container pa-4">
    <v-row>
      <button @click="toggleForm">Add new</button>
    </v-row>
    <v-row>
      <v-dialog v-model="showConfirmDelete" width="500">
        <v-card>
          <v-card-title class="headline grey lighten-2">
            Confirm
          </v-card-title>
          <v-card-text>
            <v-spacer></v-spacer>
            Are you sure you want to delete this target?
          </v-card-text>
          <v-card-actions>
            <v-btn color="secondary" @click="showConfirmDelete = false"
              >Cancel</v-btn
            >
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="doDeleteTarget">Delete</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-dialog v-model="showTargetForm" width="800">
        <v-card>
          <form @submit="saveTarget">
            <v-card-title class="headline grey lighten-2">
              Add Slack target
            </v-card-title>
            <v-card-text>
              <v-spacer></v-spacer>
              <v-text-field
                label="Target Name"
                v-model="target.name"
                @keyup="modifyTargetName"
              ></v-text-field>
              <v-text-field
                label="Webhook URL"
                v-model="target.webhook"
              ></v-text-field>
              <v-text-field
                label="Slack Channel"
                v-model="target.channel"
                @keyup="modifyTargetChannel"
              ></v-text-field>
            </v-card-text>
            <v-divider></v-divider>

            <v-card-actions>
              <v-btn color="secondary" @click="showTargetForm = false"
                >Close</v-btn
              >
              <v-spacer></v-spacer>
              <v-btn color="secondary" @click="target = {}">Clear</v-btn>
              <v-btn color="secondary" @click="testTarget">Test</v-btn>
              <v-btn color="primary" type="submit">
                Save
              </v-btn>
            </v-card-actions>
          </form>
        </v-card>
      </v-dialog>
    </v-row>
    <v-row>
      <ol>
        <li v-for="target in targets" :key="target.id">
          <v-card>
            <v-card-text>
              <v-card-actions>
                <v-btn icon @click="toggleShow(target)">
                  <v-icon>{{
                    target.show ? "mdi-chevron-up" : "mdi-chevron-down"
                  }}</v-icon>
                </v-btn>
                <div class="title">
                  {{ target.name }}

                  {{ target.show }}
                </div>
              </v-card-actions>
              <v-expand-transition>
                <div v-if="target.show">
                  <v-divider></v-divider>
                  <v-card-text>
                    {{ target.channel }}
                    <a href="#" @click="editTarget(target)">edit</a>
                    <a href="#" @click="confirmDeleteTarget(target)">delete</a>
                    <div class="truncate">{{ target.webhook }}</div>
                  </v-card-text>
                </div>
              </v-expand-transition>
            </v-card-text>
          </v-card>
        </li>
      </ol>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "PersonalTargetsSelector",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    showTargetForm: false,
    target: {},
    targets: [],
    showConfirmDelete: false,
    targetToDelete: {},
    show: {},
  }),
  async mounted() {},
  methods: {
    toggleShow(target) {
      console.log(target.show);
      this.target.show = !Boolean(target.show);
      console.log(target.show);
    },
    handleClickCancel: function () {
      this.target = {};
      this.showTargetForm = false;
      this.handlePageTrackerEvent(
        EVENT_CATEGORIES.personalTargets,
        EVENT_ACTIONS.clicked,
        "Edit Mode - Cancel a Personal Target"
      );
    },
    saveTarget(e) {
      e.preventDefault();
      console.log("Save target....", this.target);
      if (this.target.id) {
        // update
        this.targets.map(
          (t) =>
            this.targets.find((t) => t.id === this.target.id) || this.target
        );
      } else {
        // create
        this.target.id = Math.random().toString(26).slice(2);
        this.targets.push(this.target);
      }

      this.target = {};
      this.showTargetForm = false;
    },
    editTarget(target) {
      this.target = target;
      this.showTargetForm = true;
    },
    testTarget() {
      console.log("test target...");
    },
    confirmDeleteTarget(target) {
      this.showConfirmDelete = true;
      this.targetToDelete = target;
    },
    doDeleteTarget() {
      this.targets = this.targets.filter(
        (t) => t.id !== this.targetToDelete.id
      );
      this.showConfirmDelete = false;
    },
    modifyTargetChannel(e) {
      const { value } = e.target;

      console.log(value);
      this.target.channel = value.indexOf("#") === -1 ? "#" + value : value;
    },
    modifyTargetName(e) {
      const { value } = e.target;
      this.target.name =
        value.indexOf("[Personal]") === -1 ? "[Personal] " + value : value;
    },
    toggleForm(e) {
      e.preventDefault();
      this.showTargetForm = !this.showTargetForm;
    },
    handleClickClose() {
      this.forceClose = new Date().toISOString();
    },
    setConfirmationShow(value) {
      this.resetConfirmationShow = value;
    },
    handlePageTrackerEvent(category, action, name) {
      let _paq = (window._paq = window._paq || []);
      _paq.push(["trackEvent", category, action, name]);
      pageTrackerLogger(
        "Page Tracker Event " +
          category +
          " " +
          action +
          " " +
          name +
          " logged."
      );
    },
  },
  watch: {
    "target.show"(newValue) {
      console.log(newValue);
    },
  },
};
</script>
<style>
.v-application ol {
  list-style-type: none;
  padding: 0;
}
</style>

日志显示其更改，但当我将其放入{{target.show}}时，UI不更新其值