NcButton will not fire

sebastiank · October 1, 2023, 12:14am

Hi All,

So Im working on a data service app, and need to make a user settings UI screen. I put some basics, code in the file to test, but for whatever reason I can not get the NcButton to fire.

Here is the line and file,

github.com

ksainc/data/blob/bfc824ae0b62837bb341b82a5f61388f29102da2/src/UserSettings.vue#L26


      
          * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
          * GNU Affero General Public License for more details.
          *
          * You should have received a copy of the GNU Affero General Public License
          * along with this program.  If not, see <http://www.gnu.org/licenses/>.
          *
          -->
          
          <template>
          	<div>
          		<NcButton @click="alert('I am an alert box!')">
          			Show Settings
          		</NcButton>
          
          		<NcAppSettingsDialog :open.sync="ServiceSettingsDialog" name="Application settings">
          			<NcAppSettingsSection id="asci-name-1" name="Example name 1">
          				Some example content
          			</NcAppSettingsSection>
          			<NcAppSettingsSection id="asci-name-2" name="Example name 2">
          				Some more content
          			</NcAppSettingsSection>

Any ideas what I’m doing wrong here?

Sebastian

christianlupus · October 1, 2023, 6:46am

Hey @sebastiank.

I have not tested it but I highly guess that the console will show you an error in the click handler. Have a look at the browser console.

You might want to define a method in the Vue component and trigger that. Alternatively, you can emit an event or similar.

Christian

sebastiank · October 1, 2023, 3:11pm

Hey @christianlupus

I found my issue. I accidentally had a nested methods inside methods. Which was causing all the JS code NOT to execute. (Face Plam)

github.com

ksainc/data/blob/94884d0953f18c2acc587242f0a8470ce97f151a/src/UserSettings.vue#L87


      
          	},
          
          	props: [],
          
          	data() {
          		return {
          			ServiceSettingsDialog: false,
          		}
          	},
          
          	methods: {
          		methods: {
          			openServiceSettings() {
          				this.ServiceSettingsDialog = true
          			},
          			closeServiceSettings() {
          				this.ServiceSettingsDialog = false
          			},
          		},
          	},
          }

Thank you for the help!
Sebastian

christianlupus · October 1, 2023, 4:21pm

Sorry for not seeing this one.

sebastiank · October 2, 2023, 10:45pm

Hey, no worries, I missed it too.

I would never have guessed that something that minute would completely stopped all the vue code from rendering. It didn’t even through an error when being compiled by npm.

Sebastian